Stylus基本使用

介紹

stylus，是 CSS 的預處理框架。

CSS 預處理，預先處理 CSS。那 stylus 怎樣預先處理？stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可以使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套操作之后，這個文件可編譯成 CSS 文件。

安裝

安裝 Stylus 很簡單，前提是你已經安裝了 Node.js。 到 Node.js 官網下載適合你的操作系統的安裝包安裝即可。還要檢查一下 npm 是否也一並安裝了。

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

$ npm install stylus -g

安裝之后，運行 stylus -h 可查看幫助。
運行 stylus example.styl 可將 demo.styl 文件編譯成 example.css 文件。

基本使用

一段簡單的 stylus 代碼：

$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

編譯后生成的 CSS 代碼：

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

由此我們看到了 stylus 代碼以及由它編譯而成的 CSS 代碼

變量

$background-color = lightblue

上面的代碼聲明了變量 $background-color,並為其賦值 lightblue。
聲明之后，就可以使用這個變量了：

span
    background-color: $background-color

編譯成 CSS 就是：

span{
    background-color: lightblue;
}

函數

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)

編譯成 CSS 就是：

span {
    margin: 20px;
    padding: 15px;
}

選擇器

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

這一段沒有了 CSS 的花括號，沒有了 CSS 的分號，卻多了一些奇奇怪怪的縮進，還有那個 & 是什么？還 &:hover ???

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

縮進，先提出兩個有縮進關系的選擇器，上面代碼片段第二行的 .text-box 和第三行的 span，其實很容易理解，寫到 CSS 里面是這樣的：

.text-box span{ ... }

即 span 是 .text-box 的子選擇器，stylus 中以縮進表示這種關系，更加清晰明了，好看。

還有 &，這是個新鮮東西。它是父級的引用，還是來看代碼。

stylus這樣寫:

.list-item
.text-box
    &:hover
        background-color: powderblue

編譯成 CSS 是這樣：

.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

相信代碼中已經能很明確地體現出 & 父級引用的角色了。
同時，我們也不難看出， .list-item 和 .text-box 這兩個同一級的選擇器在 stylus 中是可以換行寫的，只要保證縮進相同，它們就屬於同一級的選擇器。當然，沿用 CSS 的方式，將同一級的選擇器用逗號分隔開在 stylus 中也是可以的。

 

來源：https://www.jianshu.com/p/5fb15984f22d