stylus 介紹 , 安裝 , 使用

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

2. stylus源自於node.js  ,2023年產生 , 主要用來給node專案進行css預處理支援 .

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

2.近似指令碼的方式去寫css , 

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

2. stylus全域性安裝

npm install stylus stylus-loader -g

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, //
兩個選擇器中是否換行

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

注意:   需要在styl的同級檔案目錄下的node或者git bash終端中執行命令列

stylus -w 檔名

生成壓縮版的css檔案

stylus -w -c 檔名

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

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

.list-item span,

.text-box span .list-item:hover,
.text-box:hover 

add (a, b =a)

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

span

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

span

for in   迭代 

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

stylus 安裝及使用方法

stylus是乙個css的預處理框架，2010年產生，來自node.js社群，主要用來給node專案進行css預處理支援，所以stylus是一種新型語言，可以建立健壯的 動態的 富有表現力的css。比較年輕，其本質上做的事情與sass less等類似，應該是有很多借鑑，所以近似指令碼的方式去寫css...

Stylus基本使用

stylus，是 css 的預處理框架。css 預處理，預先處理 css。那 stylus 怎樣預先處理？stylus 給 css 新增了可程式設計的特性，也就是說，在 stylus 中可以使用變數 函式 判斷 迴圈一系列 css 沒有的東西來編寫樣式檔案，執行這一套操作之後，這個檔案可編譯成 cs...

Vue 安裝依賴 stylus

安裝stylus stylus loadery依賴 npm install stylus stylus loaderpackage.json檔案配置 上述命令並不會幫我們安裝到配置檔案，需要我們自己配置下，如下，新增上這兩項配置 devdependencies 別名配置 配置別名為了在引用的時候，程...