Stylus基本使用

stylus，是 css 的預處理框架。

css 預處理，預先處理 css。那 stylus 怎樣預先處理？stylus 給 css 新增了可程式設計的特性，也就是說，在 stylus 中可以使用變數、函式、判斷、迴圈一系列 css 沒有的東西來編寫樣式檔案，執行這一套操作之後，這個檔案可編譯成 css 檔案。

然後，在命令列中執行如下指令：

$ npm install stylus -g

stylus -hstylus example.styl

$background-color = lightblue
add (a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue

.list-item span,

.text-box span .list-item:hover,

.text-box:hover

$background-color = lightblue

$background-colorlightblue

span

background-color: $background-color

span

add (a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b

**宣告了函式add,add接受兩個引數a和b，其中b的預設值是a。

add中呼叫了 stylus 的內建函式unit，此處，unit函式為a和b賦予了單位px。

最後將a和b相加，並返回結果，沒有return，但是返回了結果。

return是可以省略的。

span
margin: add(10)
padding: add(10, 5)

span

.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-color: powderblue

&&:hover

符號，這裡提到的花括號和分號在stylus中是可以省略的，不僅如此，冒號也是可以省略的，color: powderblue你可以寫成color powderblue。

縮排，先提出兩個有縮排關係的選擇器，上面**片段第二行的.text-box和第三行的span，其實很容易理解，寫到 css 裡面是這樣的：

.text-box span

.list-item

.text-box

&:hover

background-color: powderblue

.list-item:hover,

.text-box:hover

相信**中已經能很明確地體現出&父級引用的角色了。

同時，我們也不難看出，.list-item和.text-box這兩個同一級的選擇器在 stylus 中是可以換行寫的，只要保證縮排相同，它們就屬於同一級的選擇器。當然，沿用 css 的方式，將同一級的選擇器用逗號分隔開在 stylus 中也是可以的。

Stylus基本使用

stylus 介紹 , 安裝 , 使用

關於stylus庫的使用

在vue 中使用Stylus

Stylus基本使用

stylus 介紹 , 安裝 , 使用

關於stylus庫的使用

在vue 中使用Stylus

相關推薦