stylus是什么?

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

2.?stylus源自于Node.js? ,2010年產(chǎn)生 , 主要用來給Node項目進(jìn)行css預(yù)處理支持 .

stylus應(yīng)用場景?

1.標(biāo)準(zhǔn)的stylus語法就是沒有花括號，沒有分號，沒有冒號 , 減少開發(fā)時間

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

stylus如何安裝?

1.? stylus依賴于Node.js? ,所以需要在有node環(huán)境支持

2. stylus全局安裝

npm install stylus stylus-loader -g

3.? 查看是否安裝成功

stylus -h

4.vsCode中 下載插件:

stylus? :? 支持? stylus? 預(yù)處理器

stylus Supremacy? :保證自動格式化時stylus的風(fēng)格不發(fā)生變化

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

5.vsCode中 styl文件格式化設(shè)置,

在用戶設(shè)置?setting.json?配置文件中添加如下配置即可

//以下為stylus配置

"stylusSupremacy.insertColons": false, //是否插入冒號

"stylusSupremacy.insertSemicolons": false, //是否插入分好

"stylusSupremacy.insertBraces": false, //是否插入大括號

"stylusSupremacy.insertNewLineAroundImports": false, //import之后是否換行

"stylusSupremacy.insertNewLineAroundBlocks": false, //兩個選擇器中是否換行

6. 新建? .styl文件

7. 執(zhí)行命令? ? 生成并監(jiān)聽styl 的變化,? 實時更新css文件

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

stylus -w 文件名

額外補(bǔ)充:

生成壓縮版的css文件

stylus -w -c 文件名

指定目標(biāo)文件，不指定的話就是和源文件同名

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

}

聲明函數(shù)和使用

add (a, b =a)

a=unit(a, px)

b=unit(b, px)

a+ b

編譯后

span {

margin: 20px;

padding: 15px;

}

聲明字面量

for in?? 迭代

注意: 行首留空格? , 括號內(nèi)使用插值符號,

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。