Emmet: HTML/CSS コードクイック作成ツール_html/css_WEB-ITnose
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：
Zen coding下的编码演示
去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。
一、快速编写HTML代码
1. 初始化
HTML文档需要包含一些固定的标签，比如、
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
Html代码
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
Html代码
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
效果如下图所示：
4. 分组
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
Html代码
5. 隐式标签
声明一个带类的标签，只需输入div.item，就会生成
在过去版本中，可以省略掉div，即输入.item即可生成。 .item のみを入力すると、Emmet は親タグに基づいて判断します。たとえば、
- に .item と入力すると、 が生成されます。
- li: ul および ol で使用されます
- tr: table、tbody、thead、および tfoot で使用されます
- td: tr Medium で使用されます
- オプション: select および optgroup で使用されます
- & lt;li class="item1">
- li class= "item2"
- 2. 値
- margin: 5em; ユニット別名リスト:
- p は %
- を意味します e は em
- を意味します x は ex
- url('FileName.ttf') format('truetype'),
- Css コード
- 商应4. サプライヤー プレフィックス
- -moz-super-foo: ;」と入力します。 -o-super-foo:;
- super-foo:
- -webkit-transform: ;
- lg(left, #) を入力します。 fff 50%, #000)、次のコードが生成されます:
- CSS コード
- Lorem ipsum は、タイプの分野で一般的に使用されるラテン語の記事を指します主な目的は設定デザインです。さまざまなフォントやレイアウトで記事やテキストの効果をテストします。 Emmet を使用すると、lorem または lipsum と入力するだけでこれらの単語を生成できます。 lorem10 などの単語の数を指定することもできます。これにより、次のように生成されます。
- 新しい略語を追加するか、既存の略語を更新し、snippets.json ファイルを変更します
- TextMate 1.x
- Eclipse/Aptana
- Coda 1.6 および 2.x
- Espresso
- Chocolat (「Install Mixin」ダイアログボックスから追加)
以下はすべて暗黙のタグ名です:
6. 複数の要素を定義します
複数の要素を定義するには、* 記号を使用できます。たとえば、ul>li*3 は次のコードを生成できます。 t; li> 属性を持つ複数の要素を定義する
CSS コード
width: 100px; ピクセルに加えて、他の単位も生成できますh10p+m5e と入力すると、結果は次のようになります:
CSS コード
height: 10%
2 を意味します。 追加の属性
CSS コード
@font-face { font-family:;
src:url(); }
フォントファミリー: 'フォント名';
src: url('FileName.eot?#iefix') format('embedded-opentype' ),
- url('FileName.woff') format('woff'),
フォント スタイル: 通常;
フォントの太さ: 通常;
3.
いくつかの略語がわからない場合, Emmet は、ov:h、ov-h、ovh と入力するなど、入力内容に基づいて最も近い構文を照合します。生成されるコードは同じです:
overflow: hidden ;
非 W3C 標準 CSS 属性を入力すると、Emmet は TRS を入力するなど、サプライヤー プレフィックスを自動的に追加します。 webkit-transform: ;
-moz-transform: ; -transform: ;
属性の前に「-」記号を追加することもできます。または、属性に接頭辞を追加することもできます。たとえば、「-super-foo:
CSS コード
接頭辞の省略形は次のとおりです:
w は -webkit-
を意味します
m は -moz-
s は -ms-
を意味します
o は -o-
を意味します- 5. グラデーション
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5) , #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o -linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%) , #000);
3 つの追加機能
Emmet フィルタと操作の動作を変更し、preferences.json ファイルを変更します HTML または XML コードを生成する方法を定義します。 syntaxProfiles.json ファイル
5. さまざまなエディター用のプラグイン
Emmet でサポートされているエディターは次のとおりです (リンクはこのエディターの Emmet プラグインです):
- Sublime Text 2
Notepad++
PSPad