前言
Stylus是一種優雅的CSS前處理器，透過提供變數、巢狀規則、函式、運算子等高階功能，極大簡化CSS編寫。它支援動態語法和縮排敏感結構，使得程式碼風格更清晰、簡潔。Stylus可以編譯成標準CSS，提升開發效率與程式碼可維護性。
接下來，讓我們用手風琴小demo為目的，去深入瞭解stylus感知css編寫的便捷吧！
大致要求是當我們的滑鼠劃過面積會變大，並且具有慢慢的過渡效果。
準備工作
我們首先建立一個如圖所示資料夾。
編譯準備部分
全域性安裝npm i -g stylus，該命令用於全域性安裝Stylus這一CSS前處理器。透過在命令列中執行此命令，Node.js包管理器（npm）會下載並安裝Stylus到你的系統中。這樣安裝後，你就可以在任何專案中使用Stylus命令來編譯Stylus檔案為CSS檔案，而不僅僅侷限於某個特定的專案目錄下。
輸入stylus common.styl -o commom.css，該命令用於將Stylus格式的樣式檔案
common.styl編譯並輸出為CSS格式的檔案common.css。在這個過程中，Stylus前處理器會解析common.styl中的變數、巢狀、函式等高階特性，並將其轉換為瀏覽器可識別的CSS程式碼。（每一步都要我們手動更新）輸入stylus -w common.styl -o common.css，該命令用於監視（watch）
common.styl這個Stylus原始檔的改動，並自動重新編譯為common.css。當你編輯並儲存common.styl時，Stylus前處理器會立即檢測到變化，並自動生成或更新對應的CSS檔案，無需手動重複編譯。（實時更新）
介面部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手風琴</title> <link rel="stylesheet" href="./common.css"> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
我們的介面主體也非常簡單，就是一個簡單的列表結構。
css主體內容
*
margin 0
padding 0
ul,li
list-style none
.accordion
display flex
width 600px
height 200px
li
flex 1
cursor pointer
transition all 300ms
text-align center
line-height 200px
&:nth-child(1)
background-color #f66
&:nth-child(2)
background-color #66f
&:nth-child(3)
background-color #f90
&:nth-child(4)
background-color #09f
&:nth-child(5)
background-color #9c3
&:nth-child(6)
background-color #3c9
&:hover
flex 2
background-color #ccc
//styl部分
<-------------------------------------------------------->
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.accordion {
display: flex;
width: 600px;
height: 200px;
}
.accordion li {
flex: 1;
cursor: pointer;
transition: all 300ms;
text-align: center;
line-height: 200px;
}
.accordion li:nth-child(1) {
background-color: #f66;
}
.accordion li:nth-child(2) {
background-color: #66f;
}
.accordion li:nth-child(3) {
background-color: #f90;
}
.accordion li:nth-child(4) {
background-color: #09f;
}
.accordion li:nth-child(5) {
background-color: #9c3;
}
.accordion li:nth-child(6) {
background-color: #3c9;
}
.accordion li:hover {
flex: 2;
background-color: #ccc;
}
//編譯出來的css部分
我們只需要在styl檔案裡編寫樣式即可，我們可以發現，styl結構相比傳統的css介面要簡單很多。具體體現如下：
省去大括號和冒號
用縮排來表示標籤基本屬性
模組化，我們可以在與父元素屬性對齊的地方書寫屬性，還可以在這裏直接書寫子元素，省去了我們後代和子代選擇器的複雜化，並且我們這樣就成爲了一個模組，也就是說，我們更改屬性時，直接找到這個模組即可，如果是傳統的css編寫我們可能會寫得東一塊西一塊。
當需要我們表示子代選擇器時，我們可以選擇與此標籤同列的方式進行書寫，但是這樣的話就不美觀，因此，我們可以選擇將其標籤名改為&的方式然後進行縮排寫入此標籤屬性同列。
css具體效果如下：
我們定義了一個父容器為彈性容器。
子容器平均分配父容器大小，當改變時過渡0.3秒。
結構偽類選擇器設定子代顏色。
當滑鼠經過時，這個時候經過的元素flex2，相對於剩餘的元素是它們的兩倍大，並且改變顏色。
這樣我們的手風琴小demo就做好啦，並且從中認識到了Stylus給我們帶來的便捷！
