sublime text3 增加emmett外掛程式

2021-09-07 03:37:25 字數 2648 閱讀 3370

here

clickhere

不要有空格

在寫指令的時候,你可能為了**的可讀性,使用一些空格什麼的排版一下。這就會導致**無法使用。

css中的應用

編寫 position: absolute; 這乙個屬性,我們只需要輸入 posa 這四個字母即可

1、簡寫屬性和屬性值

如果你想生成 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 這條語句也當然很簡單,只需要乙個 『!』 就可以了

2、增加額外的選項

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

background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性,我們可以在生成的時候輸入 『+』 生成增強的結構,例如我們可以輸入 @f+ 命令,即可輸出選項增強版的 font-face 結構

3、增加實驗性字首(vendor prefixes)

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

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

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

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

4、生成漸變背景

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

emmet高階功能介紹:

5、生成 lorem ipsum

lorem ipsum 表示一段隨機看不懂的文字。lorem ipsum的文字讓人看不懂,這樣才能忽略內容的含義而專注內容的排版,作為測試資料填充用的。使用 emmet 生成lorem ipsum 文字非常簡單,只需要使用 lorem 這一條命令即可,敲擊 tab 鍵之後

emmet 的 lorem 命令不僅僅只有輸出這麼一段文字這樣乙個簡單的功能,它既然作為測試資料,可以加上引數指定要輸出的字元數量。例如,我們如果想輸出乙個十個單詞的 h1 標題,我們就可以使用如下命令 h1>lorem10 。但是這項功能對於使用中文的網頁測試來說,好像沒有多大用處,畢竟中文和英語單詞的排版是不同的。

6、跳轉編輯區域

用 shift+ctrl+. 和 shift+ctrl+,分別向下或者向上移動,選取的是一整塊,先從標籤開始,再是整個屬性,再是屬性值。

7、增加的尺寸大小

將游標移動到**段,摁下 ctrl+u 即可讓 emmet 自動讀取的尺寸新增上。前提條件是比較存在並且正確引用進來了

針對8、更新 css 的屬性值

想修改一下旋轉的角度值,那麼我們就需要依次修改或者按住 ctrl 多個選中進行修改。使用 emmet 的話,就方便多了,我們只需要修改其中乙個,然後摁下 shift+ctrl+r 鍵即可更新其他的相關屬性值

9、將資源轉換成 data url 形式

將游標移動到 background: url() 中的位置的地方,按下 ctrl+』 即可將編碼成 data url 格式。當然,前提條件是資源引用正確。

Sublime Text3使用技巧

二 使用技巧 在sublime text中,支援模糊搜尋 1.goto anything 快捷鍵 ctrl p 1 可以查詢檔案 2 通過 在css查詢選擇器。在js查詢函式。2.多行游標 選擇方式 1 ctrl d 新增 2 ctrl k 跳過 3 alt f3 多選 4 ctrl a ctrl ...

sublime Text3 破解安裝

作為強大而小巧,且快捷的sublimetext,怎麼能夠允許不時彈個框提醒你購買,並且頂部有未註冊這樣破壞美感的存在呢?ok,點開help,填入註冊碼即可消除此問題。sublime text 3 3103 註冊碼 begin license michael barnes single user li...

sublime text3 搭建python環境

解壓,安裝。pythonsetup.py install setpython path c python27 c python27 scripts 指向實際python安裝路徑 重型的python ide推薦pycharm,輕型的sublime。這裡搭建sublime text3的python編譯環...