㈠ CSS預處理工具Stylus簡介
Stylus是一個高效、動態且富有表現力的CSS預處理器，利用縮進、空格和換行減少輸入字元，同時兼容CSS語法。以下是Stylus的使用指南：
安裝及使用：
- 全局安裝：通過命令行輸入`npm install stylus -g`。
- 使用命令行：運行`stylus -w style.styl -o style.css`，其中`-w`監聽文件變動並重新編譯，`-o`輸出CSS文件。
在Vue項目中安裝Stylus：
- 手動安裝：執行`npm install -D stylus-loader stylus`。
- 使用Vue CLI：在項目創建時選擇Stylus預處理器。
Stylus用法：
- 選擇器&符號表示父級選擇器。
- 屬性變數：在屬性名前添加@字元，可訪問對應的值。
- 函數：定義與混入相同，但能返回值。內置函數包括顏色、文件路徑、列表和哈希、單位、數學、字元串、工具等。
- 條件判斷：支持if else語句。
- 迭代：使用for/in對表達式進行迭代，格式為`for [, ] in`。
- 導入：支持靜態@import CSS和動態導入其他Stylus樣式。
- 繼承：支持@extend繼承。
Stylus提供了簡潔、高效的CSS編寫方式，能夠提高開發效率並提升代碼可讀性。