『前端乾貨篇』：你不知道的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/ 這裏只是列出了平時經常使用的用法，在實戰中足夠解決大部分問題。但願能夠給你們點幫助，要是以爲這篇文章不錯的話，能夠點贊支持下謝謝！