stylus入門教程，在webstorm中配置stylus

stylus特點

富於表現力、具有健壯性、功能豐富、動態編碼

不需要寫CSS的冒號、分號、大括號

和LESS、SASS功能類似，會這些的入手很快

安裝

1. 安裝node+npm環境

2. 命令行全局安裝stylus

   cnpm i stylus@latest -g

3. 可以在命令行輸入 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

轉載補充：
我在使用上的命令時會報錯，可能是更新的緣故，解決方案如下：
stylus -c assets/css/index.styl
直接跟 你要編譯的 .styl 文件即可。

想將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 

補充： 如果執行完上一個命令后，提示這樣的錯誤：

Module not found: Error: Can't resolve 'stylus-loader'
報錯 找不到  stylus-loader 模塊，這時候只需

npm i stylus-loader --save-dev 
//如果你用的cnpm就 
cnpm i stylus-loader --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"