Stylus是一個CSS預處理器,它能夠幫助Web開發人員更快地編寫CSS代碼,并且更加簡潔、易于維護。在Stylus中,您可以使用類似于Python的縮進來組織代碼,使得代碼更易讀,而且還可以使用變量、混合、函數等功能。
首先,您需要安裝Stylus,可以使用npm進行安裝:
npm install stylus -g
安裝完成后,就可以開始編寫Stylus代碼了。下面是一個簡單的例子:
// 定義變量 baseColor = #333 // 定義混合 border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments // 編寫CSS代碼 body font: 12px Arial, sans-serif color: baseColor input[type="text"] border: 1px solid baseColor border-radius: 5px button border-radius: 5px cursor: pointer background-color: baseColor color: #FFF
在編譯Stylus代碼時,可以使用-st標志將其編譯為CSS文件:
stylus -st input.styl -o output.css
以上就是Stylus的基本用法介紹。更多的功能和用法請參考官方文檔。
上一篇style轉為css