stylus怎么用

這篇文章將為大家詳細講解有關stylus怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　Stylus是一款富有表現力的、動態的、健壯的CS預處理。css預處理顧名思義，預先處理css。那stylus咋預先處理呢？stylus給css添加了可編程的特性，也就是說，在stylus中可以使用變量、函數、判斷、循環一系列css沒有的東西來編寫樣式文件，執行這一套騷操作之后，這個文件可編譯成css文件。

　　Stylus的安裝

　　首先，安裝stylus（確保之前已經安裝nodejs）。

　　$npminstallstylus

　　安裝之后，運行stylus-h可查看幫助。運行stylusexample.styl可將demo.styl文件編譯成example.css文件。

　　Stylus的運行

　　1.語法

　　Stylus的語法花樣多一些，它使用“.styl”的擴展名，Stylus也接受標準的css語法，但是他也接受不帶花括號和分號的語法，如下所示：

　　/*style.styl*/

　　h2{

　　color:#0982C1;

　　}

　　/*省略花括號*/

　　h2

　　color:#0982C1;

　　/*省略花括號和分號*/

　　h2

　　color#0982C1

　　2.變量

　　你可以在css預處理器中聲明變量,并在整個樣式表中使用。css預處理器支持任何變量（例如：顏色、數值（不管是否包括單位）、文本）。然后你可以在任意地方引用變量。

　　Stylus聲明變量沒有任何限定,你可以使用"$"符號開始。結尾的分號(;)可有可無,但變量名和變量值之間的等號(=)是需要的。有一點需要注意的是,如果我們使用"@"符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值并不會賦值給變量。換句話說，在Stylus中不要使用“@”符號開頭聲明變量。

　　mainColor=#0982c1

　　siteWidth=1024px

　　$borderStyle=dotted

　　body

　　colormainColor

　　border1px$borderStylemainColor

　　max-widthsiteWidth

　　上面的代碼都將轉譯成相同的css。你可以想像一下,變量的作用有多大。我們不需要為了修改一個顏色而輸入許多次,也不需要為了修改一個寬度去到找尋找他.(我們只需要修改定義好的變量,修改一次就足夠).

關于“stylus怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。