轉(zhuǎn)載：https://www.cnblogs.com/wenqiangit/p/9717715.html#undefined

stylus特點(diǎn)

富于表現(xiàn)力、具有健壯性、功能豐富、動(dòng)態(tài)編碼

不需要寫CSS的冒號(hào)、分號(hào)、大括號(hào)

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

安裝

安裝node+npm環(huán)境

命令行全局安裝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

轉(zhuǎn)載補(bǔ)充：
我在使用上的命令時(shí)會(huì)報(bào)錯(cuò)，可能是更新的緣故，解決方案如下：
stylus -c assets/css/index.styl
直接跟 你要編譯的 .styl 文件即可。

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

stylus -C assets/css/index.css 

不想這么麻煩的用命令怎么辦？

使用webstorm設(shè)置如圖可以自動(dòng)將.styl文件轉(zhuǎn)成.css文件

注意第二張圖是默認(rèn)配置，無需修改，直接確定。

如果配置都是空的，可以安裝我的配置填寫。

如果Program項(xiàng)出現(xiàn)紅色報(bào)錯(cuò)！是因?yàn)閚ode環(huán)境有問題或者沒有全局安裝stylus

接下來只需要編寫.styl文件就會(huì)自動(dòng)編譯出.css文件。如圖

vue中使用stylus, 命令行中輸入

cnpm i stylus --save-dev 

補(bǔ)充： 如果執(zhí)行完上一個(gè)命令后，提示這樣的錯(cuò)誤：

Module not found: Error: Can't resolve 'stylus-loader'
報(bào)錯(cuò) 找不到  stylus-loader 模塊，這時(shí)候只需

npm i stylus-loader --save-dev 
//如果你用的cnpm就 
cnpm i stylus-loader --save-dev

然后，報(bào)錯(cuò)就應(yīng)該消失了。

在 .vue文件中使用, 添加使用scoped屬性表示樣式只對當(dāng)前組件有效

<style scoped lang="stylus">
  html,body
    margin 0
    padding 0
    div
       color #333
</style>

stylus語法

#### (一)選擇器

1.冒號(hào),分號(hào),大括號(hào)可寫可不寫

2.后代關(guān)系用相同縮進(jìn)表示

3.父子關(guān)系用>表示

4.偽類元素用&表示其宿主元素

5.屬性寫在前, 嵌套子元素樣式寫在后

6.分組選擇器用相同縮進(jìn)即可, 如+a+span+span

#### (二)變量

1.定義變量并賦值(建議用$作為變量前綴), 如$width=3px

2.定義函數(shù)(arguments為內(nèi)置所有參數(shù), 也可自定義參數(shù)),border()$width dashed #foo

3.函數(shù)參數(shù)可以寫默認(rèn)值,類似于es6的解構(gòu)賦值, 如padding(top=1px,right=2px)

3.方法名加()為調(diào)用函數(shù),如border()

4.建議變量定義在最上面, 然后是函數(shù), 然后才是代碼. 最好的方式是變量和函數(shù)定義成單獨(dú)的文件, 然后通過@import "variable.styl"導(dǎo)入

5.使用@height會(huì)冒泡查找值, 如自身有此屬性則獲取該屬性值; 否則層層向上查找該屬性, 如果都沒有則報(bào)錯(cuò)

6.可以使用運(yùn)算符進(jìn)行計(jì)算

7.z-index 1 unless @z-index表示默認(rèn)z-index=1除非@z-index存在

(三)插值

1.實(shí)現(xiàn)類似autoprefixer.css的效果給兼容屬性加前綴

2.使用循環(huán)for in減少代碼量

3.使用if-else判斷邏輯

(四)運(yùn)算符

[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless

(五)內(nèi)置函數(shù)

函數(shù)實(shí)例	值	說明
unit(14%,px)	14px	直接用第二個(gè)參數(shù)替換第一個(gè)參數(shù)的
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	是否為偶數(shù)
odd(3)	true	是否為奇數(shù)
sum(1 2 3)	6
avg(1 2 3)	2
join(‘,’,1 2 3)	1 2 3	使用第一個(gè)參數(shù)為連接符將后面數(shù)組連接
length(1 2 3 4)	4
image-size(‘aa.png’)	20px 30px	獲取圖片寬高

(六)尾參數(shù)…

1.可以使用args...或者arr...等接受所有參數(shù); 前面也可以單個(gè)接受參數(shù); 但是尾參數(shù)寫法只能作為最后一個(gè)參數(shù)

2.也可以使用args[0]或者arguments[0]這種下標(biāo)的方式訪問

3.args...會(huì)忽略,;如果希望不忽略請使用arguments

補(bǔ)充：這部分自己練習(xí)代碼示例：

(七)@extend繼承

1.使用@extend將公共樣式抽取, 用子類繼承; 在html中可以少寫一個(gè)類名 ,如class="btn btn-primary"只需要寫成class="btn-primary"

總結(jié)

以上是生活随笔為你收集整理的stylus入门教程，在webstorm中配置stylus的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。