stylus，是 css 的預處理框架。
css 預處理，預先處理 css。那 stylus 怎樣預先處理？stylus 給 css 新增了可程式設計的特性，也就是說，在 stylus 中可以使用變數、函式、判斷、迴圈一系列 css 沒有的東西來編寫樣式檔案，執行這一套操作之後，這個檔案可編譯成 css 檔案。
然後，在命令列中執行如下指令：
$ npm install stylus -g
stylus -hstylus example.styl
$background-color = lightblueadd (a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue
.list-item span,.text-box span .list-item:hover,
.text-box:hover
$background-color = lightblue
$background-colorlightblue
spanbackground-color: $background-color
span
add (a, b = a)a = unit(a, px)
b = unit(b, px)
a + b
**宣告了函式add,add接受兩個引數a和b，其中b的預設值是a。
add中呼叫了 stylus 的內建函式unit，此處，unit函式為a和b賦予了單位px。
最後將a和b相加，並返回結果，沒有return，但是返回了結果。
return是可以省略的。
spanmargin: add(10)
padding: add(10, 5)
span
.list-item.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue
&&:hover
符號，這裡提到的花括號和分號在stylus中是可以省略的，不僅如此，冒號也是可以省略的，color: powderblue你可以寫成color powderblue。
縮排，先提出兩個有縮排關係的選擇器，上面**片段第二行的.text-box和第三行的span，其實很容易理解，寫到 css 裡面是這樣的：
.text-box span
.list-item.text-box
&:hover
background-color: powderblue
.list-item:hover,.text-box:hover
相信**中已經能很明確地體現出&父級引用的角色了。
同時，我們也不難看出，.list-item和.text-box這兩個同一級的選擇器在 stylus 中是可以換行寫的，只要保證縮排相同，它們就屬於同一級的選擇器。當然，沿用 css 的方式，將同一級的選擇器用逗號分隔開在 stylus 中也是可以的。
stylus 介紹 , 安裝 , 使用
1.stylus是css預處理器,具有對css可程式設計,編寫快速便捷的特性.2.stylus源自於node.js 2010年產生 主要用來給node專案進行css預處理支援 1.標準的stylus語法就是沒有花括號，沒有分號，沒有冒號 減少開發時間 2.近似指令碼的方式去寫css 1.stylus...
關於stylus庫的使用
關於stylus庫的使用 專案中，通常會有那中主題顏色啦，主題字型字型大小啦，或者是某種會重複使用的主題樣式，但是這種東西要是每個檔案都要改那就很蛋疼了，所以對於開發專案來說很需要這種檔案，來減少工作量。大致步驟 建乙個 styl 檔案，然後在你想用的style標籤裡引入這個檔案來使用 abc.st...
在vue 中使用Stylus
對於電腦配置較高的記憶體較大的，推薦使用webstorm，這個編輯器很智慧型也很龐大，對於電腦配置稍低的，推薦使用後面兩個。另外，在編輯 時，當時用後兩種編輯器時，很依賴各種各樣的外掛程式 當你覺得使用的時候很不爽的時候 就去網上搜相應的外掛程式 比如我需要vue高亮語法的外掛程式，就去搜尋安裝vu...