『前端乾貨篇』：你不知道的Stylus

最近沉迷學習（其實大部分時間都在看英雄聯盟S8總決賽），把這幾天在學的Stylus做個總結。這篇文章對學習Stylus的新手來說應該會有幫助~ 為了讓大家程式碼觀賞性更好，這裡的程式碼都以截圖的方式呈現，用的IDE是VSCode。

介紹

Stylus是個非常優秀的CSS預編譯器，算是前端工作流的新寵。寫起來十分簡潔！究竟有多簡潔呢，請看圖

左邊是Stylus的寫法，右邊是原生CSS的寫法
不需要寫分號！！不需要寫冒號！！甚至連花括號都可以省略！！！
只需要簡單的縮排即可，對比手寫原生CSS程式碼簡直...

安裝

你可以使用yarn來安裝（推薦）
(不知道yarn的小夥伴可以看我之前寫的關於yarn用法的文章~ juejin.im/post/5bbb1b… )

yarn global add stylus

也可以使用npm來安裝

npm install stylus -g

安裝好了後就可以使用stylus的命令來編譯生成css檔案

用法

命令

stylus基本編譯命令

stylus xxx.styl -o xxx.css   //xxx是你建立的檔名  -o 的意思是-out 輸出css檔案
複製程式碼

例如：這是我的檔案目錄， 首先建立stylus檔案，檔名可以隨便取，我這裡叫style，檔案字尾必須以 .styl 結尾

檔案裡的內容編寫方式類似於css寫法，但可以省略冒號，分號，花括號，足夠簡潔

然後在該檔案目錄下開啟控制檯(終端)輸入stylus命令

你會發現stylus自動幫我們在本目錄下編譯並生成好了style.css檔案

然後開啟這個style.css檔案，會發現格式什麼的都幫我們自動補齊了

是不是很方便~
值得注意的是，在我們編寫stylus檔案的時候，一定要注意縮排，因為stylus就是根據縮排來識別選擇器層級和對應css樣式規則的
比如

讓我們再使用stylus編譯一次

會發現生成的css檔案亂七八糟，各種報錯！

所以在編寫stylus檔案的時候一定要注意縮排

有沒有發現每修改一次stylus檔案就要再輸入一次stylus命令進行重新編譯，這樣對於我們開發者來說極大的不便。
所以stylus提供瞭解決的方法，就是在原有基礎上加上-w

stylus -w xxx.styl -o xxx.css   //在原有的基礎上加了-w  w的意思是watch，也就是監聽
複製程式碼

這樣就可以實時監聽修改，並實時編譯。

當我們修改stylus檔案時(修改完記得儲存 Ctrl+S )

可以看到控制檯實時幫我們重新編譯了

然後我們再看看css檔案

這樣就達到了實時監控，這也是我們現代前端工作流中需要的，實時監控更新。

選擇器

• 縮排
  開始也說了，stylus的縮排有很重要的意義，stylus就是根據縮排來區別選擇器和CSS樣式，所以寫完選擇器後，下一行務必注意縮排
• 逗號
  Stylus就和CSS一樣，允許你使用逗號為多個選擇器同時定義屬性。

  

  也可以省去逗號，一個選擇器佔一行寫，可以達到同樣的效果

  

• 巢狀
  stylus支援巢狀語法，相當於後代選擇器

  

• 父級引用
  父級引用簡單來說就是：與父級的選擇器作拼接。語法是在巢狀的選擇器前加一個&字元，我們直接看例子吧
  1. 實現交集選擇器的使用

     

  2. 實現偽元素的使用

     

變數

在Stylus中，可以定義變數儲存經常使用的資料，然後在我們的樣式中貫穿使用。
定義變數的方法也巨簡單，直接使用 變數名 = 變數值 的形式

bgc = green
fz = 10px
...
複製程式碼

建議把變數統一在最上面宣告賦值

當然你也可以識別符號來定義變數
Stylus支援$符號來定義變數，如果你學過Sass的話應該會很有親切感

變數甚至可以互相引用，組成一個表示式列表

屬性查詢
Stylus有另外一個很酷的獨特功能，不需要分配值給變數就可以定義引用屬性。下面是個很好的例子，元素水平垂直居中對齊（典型的方法是使用百分比和margin負值）

我們甚至可以不使用這裡的變數w和h, 而是簡單地前置@字元在屬性名前來訪問該屬性名對應的值
也就是說@+屬性名可以當做變數使用

變數的向上冒泡查詢

混合

混合可以類似於程式碼塊，可以進行程式碼的複用，例如

你也可以在混合中寫CSS樣式規則進行復用

總結來說就是在混合中書寫一些常用的程式碼塊，進行復用，可以少些很多的程式碼！

方法（函式）

Stylus強大之處就在於其內建的語言函式定義。其定義與混合(mixins)一致，不同的是混合是引用是直接複用程式碼塊，而函式引用則是將返回值返回。
舉個簡單的例子

函式的預設引數

Stylus還可以支援多個返回值，這個很強！

我們還可以把函式當作引數傳遞到新的函式中

註釋

聊聊註釋吧，單行註釋&多行註釋
單行註釋

多行註釋

引入

sylus還可以引入外部的stylus檔案

總結

CSS前處理器用法其實都很類似，無非就是給CSS賦予了可程式設計的能力，包括一些變數、函式、運算子和if-else等等的操作。如果想更加深入的瞭解Stylus，推薦大家去看張鑫旭大大的Stylus文章。www.zhangxinxu.com/jq/stylus/
這裡只是列出了平時常用的用法，在實戰中足夠解決大部分問題。希望可以給大家點幫助，要是覺得這篇文章不錯的話，可以點贊支援下謝謝！