『前端乾貨篇』：你不知道的Stylus
最近沉迷學習（其實大部分時間都在看英雄聯盟S8總決賽），把這幾天在學的Stylus做個總結。這篇文章對學習Stylus的新手來說應該會有幫助~ 為了讓大家程式碼觀賞性更好，這裡的程式碼都以截圖的方式呈現，用的IDE是VSCode。
介紹
Stylus是個非常優秀的 CSS預編譯器 ，算是前端工作流的新寵。寫起來十分簡潔！究竟有多簡潔呢，請看圖
左邊是Stylus的寫法，右邊是原生CSS的寫法
不需要寫分號！！不需要寫冒號！！甚至連花括號都可以省略！！！
只需要簡單的縮排即可，對比手寫原生CSS程式碼簡直...
安裝
你可以使用yarn來安裝（推薦）
(不知道yarn的小夥伴可以看我之前寫的關於yarn用法的文章~ ofollow,noindex">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//在原有的基礎上加了-ww的意思是watch，也就是監聽 複製程式碼
這樣就可以實時監聽修改，並實時編譯。
當我們修改stylus檔案時(修改完記得儲存 Ctrl+S )
可以看到控制檯實時幫我們重新編譯了
然後我們再看看css檔案
這樣就達到了實時監控，這也是我們現代前端工作流中需要的，實時監控更新。
選擇器
- 縮排
開始也說了，stylus的縮排有很重要的意義，stylus就是根據縮排來區別選擇器和CSS樣式，所以寫完選擇器後，下一行務必注意縮排 - 逗號
Stylus就和CSS一樣，允許你使用逗號為多個選擇器同時定義屬性。
- 巢狀
stylus支援巢狀語法，相當於後代選擇器
- 父級引用
父級引用簡單來說就是：與父級的選擇器作拼接。語法是在巢狀的選擇器前加一個&字元，我們直接看例子吧- 實現交集選擇器的使用
- 實現偽元素的使用
- 實現交集選擇器的使用
變數
在Stylus中，可以定義變數儲存經常使用的資料，然後在我們的樣式中貫穿使用。
定義變數的方法也巨簡單，直接使用 變數名 = 變數值 的形式
bgc = green fz = 10px ... 複製程式碼
建議把變數統一在最上面宣告賦值
當然你也可以識別符號來定義變數
Stylus支援$符號來定義變數，如果你學過Sass的話應該會很有親切感
變數甚至可以互相引用，組成一個表示式列表
屬性查詢
Stylus有另外一個很酷的獨特功能，不需要分配值給變數就可以定義引用屬性。下面是個很好的例子，元素水平垂直居中對齊（典型的方法是使用百分比和margin負值）
我們甚至可以不使用這裡的變數w和h, 而是簡單地前置@字元在屬性名前來訪問該屬性名對應的值
也就是說@+屬性名
可以當做變數使用
變數的向上冒泡查詢
混合
混合可以類似於程式碼塊，可以進行程式碼的複用，例如
你也可以在混合中寫CSS樣式規則進行復用
總結來說就是在混合中書寫一些常用的程式碼塊，進行復用，可以少些很多的程式碼！
方法（函式）
Stylus強大之處就在於其內建的語言函式定義。其定義與混合(mixins)一致，不同的是混合是引用是直接複用程式碼塊，而函式引用則是將返回值返回。
舉個簡單的例子
函式的預設引數
Stylus還可以支援多個返回值，這個很強！
我們還可以把函式當作引數傳遞到新的函式中
多行註釋