stylus入門教程，在webstorm中配置stylus
轉載：https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined
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" 
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"