stylus 介紹 , 安裝 , 使用

stylus是什么?

　　1. stylus是css預處理器,具有對css可編程,編寫快速便捷的特性.

　  2. stylus源自於Node.js  ,2010年產生 , 主要用來給Node項目進行css預處理支持 .

stylus應用場景?

　　1.標准的stylus語法就是沒有花括號，沒有分號，沒有冒號 , 減少開發時間

　  2.近似腳本的方式去寫css , 

stylus如何安裝?

　　 1.  stylus依賴於Node.js  ,所以需要在有node環境支持

　   2. stylus全局安裝

npm install stylus stylus-loader -g

　　 3.  查看是否安裝成功

stylus -h

　　

 

 

 　　4.vsCode中 下載插件:

　　　　stylus  :  支持  stylus  預處理器

　　　  stylus Supremacy  :保證自動格式化時stylus的風格不發生變化

　　　  language-stylus  :  避免使用vscode中自動格式化快捷SHIFT+ALT+F格式化stylus后的代碼經常會添加大括號和分號的問題

　　 5.vsCode中 styl文件格式化設置,

　　　　在用戶設置 setting.json 配置文件中添加如下配置即可

// 以下為stylus配置
 "stylusSupremacy.insertColons": false, // 是否插入冒號
 "stylusSupremacy.insertSemicolons": false, // 是否插入分好
 "stylusSupremacy.insertBraces": false, // 是否插入大括號
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
 "stylusSupremacy.insertNewLineAroundBlocks": false, // 兩個選擇器中是否換行

 

　　 6. 新建  .styl文件

　　7. 執行命令    生成並監聽styl 的變化,  實時更新css文件

　　注意:   需要在styl的同級文件目錄下的node或者git Bash終端中執行命令行

stylus -w 文件名

 額外補充:

生成壓縮版的css文件

stylus -w -c 文件名

指定目標文件，不指定的話就是和源文件同名

$ stylus -w  styl文件名 -o 指定路徑和文件名

 

 

 

 　　

stylus如何使用?

簡單舉例

   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;
}

  聲明函數和使用

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

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

   編譯后

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

 聲明字面量

 

  for in   迭代 

注意: 行首留空格  , 括號內使用插值符號,