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"