轉載：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

轉載補充：
我在使用上的命令時會報錯，可能是更新的緣故，解決方案如下：
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"

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。