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: 20px;

padding: 15px;

}

聲明字面量

for in?? 迭代

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

總結

以上是生活随笔為你收集整理的sts可以安装stylus插件吗_stylus 介绍 , 安装 , 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。