stylus特點
富於表現力、具有健壯性、功能豐富、動態編碼
不需要寫CSS的冒號、分號、大括號
和LESS、SASS功能類似，會這些的入手很快
安裝
安裝node+npm環境
命令行全局安裝stylus
cnpm i stylus@latest -g可以在命令行輸入 stylus -h 查看有哪些可以用的命令
使用
想將assets/css目錄下的所有.styl文件編譯成css怎么辦？ \
stylus -c assets/css/
只想將assets/css/index.styl 編譯成assets/css/index.css？
stylus -c assets/css/index.styl assets/css/index.css
想將assets/css/index.css 編譯成assets/css/index.styl？
stylus -C assets/css/index.css
不想這么麻煩的用命令怎么辦？
使用webstorm設置如圖可以自動將.styl文件轉成.css文件 
注意第二張圖是默認配置，無需修改，直接確定。
如果配置都是空的，可以安裝我的配置填寫。
如果Program項出現紅色報錯！是因為node環境有問題或者沒有全局安裝stylus
接下來只需要編寫.styl文件就會自動編譯出.css文件。如圖
vue中使用stylus, 命令行中輸入
cnpm i stylus --save-dev
在 .vue文件中使用, 添加使用 scoped 屬性表示樣式只對當前組件有效
<style scoped lang="stylus">
html,body
margin 0
padding 0
div
color #333
</style>
stylus語法
(一)選擇器
1.冒號,分號,大括號可寫可不寫
2.后代關系用相同縮進表示
3.父子關系用
>表示4.偽類元素用
&表示其宿主元素5.屬性寫在前, 嵌套子元素樣式寫在后
6.分組選擇器用相同縮進即可, 如
+a+span+span
(二)變量
1.定義變量並賦值(建議用$作為變量前綴), 如$width=3px
2.定義函數(arguments為內置所有參數, 也可自定義參數), border() $width dashed #foo
3.函數參數可以寫默認值,類似於es6的解構賦值, 如 padding(top=1px,right=2px)
3.方法名加() 為調用函數,如 border()
4.建議變量定義在最上面, 然后是函數, 然后才是代碼. 最好的方式是變量和函數定義成單獨的文件, 然后通過@import variable.styl 導入
5.使用@height 會冒泡查找值, 如自身有此屬性則獲取該屬性值; 否則層層向上查找該屬性, 如果都沒有則報錯
6.可以使用運算符進行計算
7.z-index 1 unless @z-index 表示默認 z-index=1 除非 @z-index 存在
(三)插值
1.實現類似 autoprefixer.css 的效果給兼容屬性加前綴
2.使用循環 for in 減少代碼量
3.使用 if-else 判斷邏輯
(四)運算符
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless
(五)內置函數
| 函數實例 | 值 | 說明 |
|---|---|---|
| unit(14%,px) | 14px | 直接用第二個參數替換第一個參數的 |
| abs(-5px) | 5px | |
| ceil(2.3px) | 3px | 向上取整 |
| floor(2.6px) | 2px | 向下取整 |
| round(2.6px) | 3px | 四舍五入取整 |
| min(1,2) | 1 | |
| max(1,2) | 2 | |
| even(3) | false | 是否為偶數 |
| odd(3) | true | 是否為奇數 |
| sum(1 2 3) | 6 | |
| avg(1 2 3) | 2 | |
| join(‘,’,1 2 3) | 1 2 3 | 使用第一個參數為連接符將后面數組連接 |
| length(1 2 3 4) | 4 | |
| image-size(‘aa.png’) | 20px 30px | 獲取圖片寬高 |
(六)尾參數…
1.可以使用 args... 或者 arr... 等接受所有參數; 前面也可以單個接受參數; 但是 尾參數寫法只能作為最后一個參數
2.也可以使用 args[0] 或者 arguments[0] 這種下標的方式訪問
3.args... 會忽略 , ;如果希望不忽略請使用 arguments
(七)@extend繼承
1.使用 @extend 將公共樣式抽取, 用子類繼承; 在html中可以少寫一個類名 ,如 class="btn btn-primary" 只需要寫成 class="btn-primary"
