Emmet plus 让 Emmet 更强大

如何使用？

以 Sublime Text 2 为例

1. 首先请确保已经安装了 Emmet， 并可以正常使用。

2. 打开菜单 Preferences→Package Settings→Emmet→Settings-User

3. 复制Emmet.sublime-settings文件中的所有内容，粘贴到上面打开的Settings-User中

4. 保存后重启 Sublime Text

5. 打开一个 CSS 文件，输入cm，如果成功生成了如下注释，安装成功

    /**
     * 
     * @file:     
     * @author:   
     * @update:   
     * @note:     
     * @doc:      
     */

6. 尽情享受吧！

Sublime Text 3 如果无法使用，欢迎反馈

扩展了哪些功能？

• 统一的注释风格，以css-creating为参考。

  例如输入c，cm

  在HTMl文件中会输出：

  <!--  -->
  
  <!-- 模块名 begin -->
      
  <!-- 模块名 end -->
  
  

  在 CSS 文件中会输出：

  /*  */
  
  /**
   * 
   * @file:     
   * @author:   
   * @update:   
   * @note:     
   * @doc:      
  */
  

  在 CSS 文件中输入c1，c2，会输出

  /* ==========================================================================
     1级区块标题
     ========================================================================== */
  
  /* --------------------------------------------------------------------------
     2级区块标题
     -------------------------------------------------------------------------- */
  

• 扩展代码片段

  输入@ff，会输出：

  @font-face {
      font-family: 'FontName'; /* IE9 */
      src: url('FileName.eot');
      src: url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('FileName.woff') format('woff'), /* Chrome,Firefox */
           url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
           url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
  }

  输入bgi+，会输出：

  @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
         only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
         only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
         only screen and (min-resolution: 192dpi), /* 不支持dppx的浏览器 */
         only screen and (min-resolution: 2dppx) /* 标准 */
  {
      .selector{
          background-image:url();/* Retina */
          background-size: 图片宽度÷2px 图片高度÷2px;
      }
  }

• 输出 cube 中的布局结构

  输入vbox，会输出：

  <div class="vertical-box">
      <b class="vertical-hack"></b>
      <div class="vertical-content">
          <p>未知高度垂直居中模块</p>
      </div>
  </div>

• 扩展和修复 emmet 错误的 CSS 声明

  例如font-smoothing属性，输入fsm，会输出：

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Firefox 25+ */

  • 扩展 emmet 不支持的属性，比如flex，输入dfx，会输出：

  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

• 增加了更多的 CSS 单位:

  c:ch, d:deg, g:grad, r:rad, t:turn

• 增加更多的 CSS 简写:

  n:none, ih:inherit, ii:initial, db:double, u:unset

• 增加了更多的没有单位的 CSS 属性:

  animation-iteration-count, counter-increment, font-size-adjust, flex-grow, flex-shrink, order, column-count, orphans, widows, shape-image-threshold, mask-box-outset

所有输出代码都已经预定义光标路径，按 TAB 键可以自动切换到下一个编辑点。

赶快试试吧(^__^) ！