Sublime Text 2 已經(jīng)提供了比較強(qiáng)大的 CSS 樣式所寫方法來提高 CSS 編寫效率还棱。例如編寫 position: absolute; 這一個(gè)屬性，我們只需要輸入 posa 這四個(gè)字母即可锅劝。它會彈出縮寫樣式的提示：
你不妨在編寫 CSS 的時(shí)候，留意一下 ST2 提供了哪些屬性的縮寫方法，這樣就可以提高一定的效率了歉糜。但是 Emmet 提供了更多的功能宪卿，請往下看的诵。
簡寫屬性和屬性值
如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因?yàn)?Emmet 的默認(rèn)設(shè)置 w 是 width 的縮寫佑钾，后面緊跟的數(shù)字就是屬性值西疤。默認(rèn)的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位休溶，可以是任意字符代赁。例如，w100foo 會生成 width:100foo; 這樣一條語句兽掰。你同樣也可以簡寫屬性單位芭碍，如果你緊跟屬性值后面的字符是 p ，那么將會生成 width:100%; 這樣的語句禾进，其中 p 表示百分比單位豁跑。與此類似的還有：e → em; x → ex。
例如 margin 這樣的屬性泻云，可能并不是一個(gè)屬性值艇拍，生成多個(gè)屬性值需要用橫杠（-）連接兩個(gè)屬性值，因?yàn)?Emmet 的指令中是不允許空格的宠纯。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句卸夕。如果你想生成負(fù)值，多加一條橫杠即可婆瓜。需要注意的是快集，如果你對每個(gè)屬性都指定了單位贡羔，那么不需要使用橫杠分割。例如使用 m10ff20ff 這條命令可以生成 margin: 10ff 20ff; 這條語句个初，如果你在 20ff 前面加了橫杠的話乖寒，20ff 就會變成負(fù)值了。
如果你想一次生成多條語句院溺，可以使用 + 連接兩條語句楣嘁，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句。
顏色值也是可以快速生成的珍逸，例如 c# → color: #333;逐虚，更復(fù)雜一點(diǎn)的，使用 bd5#0s 可以生成 border: 5px #000 solid; 這樣一句谆膳。下面是規(guī)則：
-
1 → #111111
-
e0 → #e0e0e0
-
fc0 → #ffcc00
生成 !important 這條語句也當(dāng)然很簡單叭爱，只需要一個(gè) ! 就可以了。
增加額外的選項(xiàng)
使用 @f 即可生成 CSS3 中的 font-face 的代碼結(jié)構(gòu)：
@font-face {
font-family:;
src:url();
}
但是這個(gè)結(jié)構(gòu)太簡單漱病，不包含一些其他的 font-face 的屬性买雾，諸如 background-image、 border-radius缨称、 font凝果、@font-face、 text-outline睦尽、 text-shadow 等屬性器净，我們可以在生成的時(shí)候輸入 + 生成增強(qiáng)的結(jié)構(gòu)，例如我們可以輸入 @f+ 命令当凡，即可輸出選項(xiàng)增強(qiáng)版的 font-face 結(jié)構(gòu)：
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
增加實(shí)驗(yàn)性前綴（Vendor Prefixes）
CSS3 等現(xiàn)在還沒有出正式的 W3C 規(guī)范山害，但是很多瀏覽器已經(jīng)實(shí)現(xiàn)了對應(yīng)的功能，僅作為測試只用沿量，所以在屬性前面加上自己獨(dú)特的實(shí)驗(yàn)性前綴浪慌，不同的瀏覽器只會識別帶有自己規(guī)定前綴的樣式。然而為了實(shí)現(xiàn)兼容性朴则，我們不得不編寫大量的冗余代碼权纤，而且要加上對應(yīng)的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性乌妒。
ST2 已經(jīng)內(nèi)置了一些常見的需要實(shí)驗(yàn)性前綴的 CSS3 屬性汹想，例如輸入 trf 會彈出提示，然后敲擊回車鍵即可生成撤蚊。而 Emmet 增強(qiáng)了這個(gè)功能古掏。在任意字符前面加上一條橫杠-，即可生成該屬性的帶前綴代碼侦啸，例如輸入 -foo-css槽唾，會生成：
-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;
雖然 foo-css 并不是什么屬性丧枪，但是照樣可以生成。此外庞萍，你還可以詳細(xì)的控制具體生成哪幾個(gè)瀏覽器前綴或者先后順序拧烦，使用 -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 使用這個(gè)屬性可以直接制作出漸變的效果。但是這個(gè)屬性的參數(shù)比較復(fù)雜重虑，而且需要添加實(shí)驗(yàn)性前綴践付，無疑需要生成大量代碼。而在 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);
直接幫你生成好了瀏覽器前綴永高。
