stylus怎么用

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

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

　　Stylus的安裝

　　首先，安裝stylus（確保之前已經(jīng)安裝nodejs）。

　　$npminstallstylus

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

　　Stylus的運(yùn)行

　　1.語法

　　Stylus的語法花樣多一些，它使用“.styl”的擴(kuò)展名，Stylus也接受標(biāo)準(zhǔn)的css語法，但是他也接受不帶花括號(hào)和分號(hào)的語法，如下所示：

　　/*style.styl*/

　　h2{

　　color:#0982C1;

　　}

　　/*省略花括號(hào)*/

　　h2

　　color:#0982C1;

　　/*省略花括號(hào)和分號(hào)*/

　　h2

　　color#0982C1

　　2.變量

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

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

　　mainColor=#0982c1

　　siteWidth=1024px

　　$borderStyle=dotted

　　body

　　colormainColor

　　border1px$borderStylemainColor

　　max-widthsiteWidth

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

關(guān)于“stylus怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。