Emmet的在css中語法使用

前面潛行者m 介紹了 emmet 的功能和如何使用 emmet 來生成 html **，這次再來講解一下如何使用 emmet 提高 css 編寫效率。

你不妨在編寫 css 的時候，留意一下 st2 提供了哪些屬性的縮寫方法，這樣就可以提高一定的效率了。但是 emmet 提供了更多的功能，請往下看。

如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 emmet 的預設設定 w 是 width 的縮寫，後面緊跟的數字就是屬性值。預設的屬性值單位是 px ，你可以在值的後面緊跟字元生成單位，可以是任意字元。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值後面的字元是 p ，那麼將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e→ em;x→ ex。

例如 margin 這樣的屬性，可能並不是乙個屬性值，生成多個屬性值需要用橫槓（-）連線兩個屬性值，因為 emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫槓即可。需要注意的是，如果你對每個屬性都指定了單位，那麼不需要使用橫槓分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫槓的話，20ff 就會變成負值了。

如果你想一次生成多條語句，可以使用『+』連線兩條語句，例如使用h10p+m5e可以生成 height: 10%;margin: 5em; 這兩條語句。

顏色值也是可以快速生成的，例如c#3→color: #333;，更複雜一點的，使用bd5#0s可以生成border: 5px #000 solid;這樣一句。下面是規則：

#1 → #111111 #e0 → #e0e0e0 #fc0 → #ffcc00

生成 !important 這條語句也當然很簡單，只需要乙個『!』就可以了。

使用 @f 即可生成 css3 中的 font-face 的**結構：

@font-face

但是這個結構太簡單，不包含一些其他的 font-face 的屬性，諸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入『+』生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構：

@font-face

css3 等現在還沒有出正式的 w3c 規範，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性字首，不同的瀏覽器只會識別帶有自己規定字首的樣式。然而為了實現相容性，我們不得不編寫大量的冗餘**，而且要加上對應的字首。使用 emmet 可以快速生成帶有字首的 css3 屬性。

st2 已經內建了一些常見的需要實驗性字首的 css3 屬性，例如輸入 trf 會彈出提示，然後敲擊回車鍵即可生成。而 emmet 增強了這個功能。在任意字元前面加上一條橫槓（-），即可生成該屬性的帶字首**，例如輸入 -foo-css，會生成：

-webkit-foo-css:;
-moz-foo-css:;
-ms-foo-css:;
-o-foo-css:;
foo-css
:;

雖然 foo-css 並不是什麼屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器字首或者先後順序，使用-wm-trf即可生成：

-webkit-transform:;
-moz-transform:;
transform
:;

可想而知，w 就是 webkit 字首的縮寫，m 是 moz 字首縮寫，s 是 ms 字首縮寫，o 就是 opera 瀏覽器字首的縮寫。如果使用-osmw-abc即可生成：

-o-abc:;
-ms-abc:;
-moz-abc:;
-webkit-abc:;
abc:
;

css3 中新增加了一條屬性linear-gradient使用這個屬性可以直接製作出漸變的效果。但是這個屬性的引數比較複雜，而且需要新增實驗性字首，無疑需要生成大量**。而在 emmet 中使用 lg() 指令即可快速生成，例如：使用lg(left, #fff 50%, #000)可以直接生成：

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
: -moz-linear-gradient(left, #fff 50%, #000);
background-image
: -o-linear-gradient(left, #fff 50%, #000);
background-image
: linear-gradient(left, #fff 50%, #000);

直接幫你生成好了瀏覽器字首。

專題：前端開發神器 emmet：

Emmet的在css中語法使用

vscode使用emmet語法

CSS知識補足 emmet語法支援

在Brackets中使用Emmet

Emmet的在css中語法使用

vscode使用emmet語法

CSS知識補足 emmet語法支援

在Brackets中使用Emmet

相關推薦