stylus基礎教程,stylus實例教程,stylus語法總結

stylus特色
富於表現力、具備健壯性、功能豐富、動態編碼
不須要寫CSS的冒號、分號、大括號
和LESS、SASS功能相似，會這些的入手很快
stylus特色
安裝
使用
stylus語法
(一)選擇器
(二)變量
(三)插值
(四)運算符
(五)內置函數
(六)尾參數…
(七)@extend繼承
相關教程:鑫空間,鑫生活
安裝
1.安裝node+npm環境
2.命令行全局安裝stylus

cnpm i stylus@latest -g

3.能夠在命令行輸入 stylus -h 查看有哪些能夠用的命令

使用
1.想將assets/css目錄下的全部.styl文件編譯成css怎麼辦？
stylus -c assets/css/

2.只想將assets/css/index.styl 編譯成assets/css/index.css？

stylus -c assets/css/index.styl assets/css/index.css

3.想將assets/css/index.css 編譯成assets/css/index.styl？

stylus -C assets/css/index.css

4.不想這麼麻煩的用命令怎麼辦？使用webstorm設置如圖能夠自動將.styl文件轉成.css文件

4-1.注意第二張圖是默認配置，無需修改，直接肯定。
4-2.若是配置都是空的，能夠安裝個人配置填寫。
4-3.若是Program項出現紅色報錯！是由於node環境有問題或者沒有全局安裝stylus
4-4.接下來只須要編寫.styl文件就會自動編譯出.css文件。如圖

5.vue中使用stylus, 命令行中輸入cnpm i stylus --save-dev
5.1在 .vue文件中使用, 添加使用 scoped 屬性表示樣式只對當前組件有效
<style scoped lang="stylus">
html,body
margin 0
padding 0
div
color #333
</style>
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(五)內置函數
函數實例 值 說明
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"