CSS預(yù)處理器如何使用

這篇文章給大家分享的是有關(guān)CSS預(yù)處理器如何使用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　我們先來(lái)看一下什么是CSS預(yù)處理器？

　　默認(rèn)的CSS是到現(xiàn)在為止不可能實(shí)現(xiàn)的描述，CSS預(yù)處理器是為了有效地描述CSS的東西。

　　但是，CSS預(yù)處理器不能在瀏覽器中使用。

　　雖然有各種各樣的Sass，Less，但到目前為止它似乎仍然很難再CSS中描述，不過(guò)是被稱(chēng)為“新的CSS擴(kuò)展版本”。

　　主要的預(yù)處理器類(lèi)型

　　Sass

　　Sass是一個(gè)通過(guò)轉(zhuǎn)換scsss的CSS文件，擴(kuò)展名是“.scss”使用變量和公式添加到CSS編程風(fēng)格中。

　　通過(guò)轉(zhuǎn)換（編譯）“style.scss”的Sass文件，您可以創(chuàng)建“style.css”。

　　要使用它，你必須安裝ruby。

　　LESS

　　LESS就轉(zhuǎn)換（編譯）像Sass這樣的LESS文件。

　　變量的概念可以更少，因此您可以計(jì)算它，也可以分層次地編寫(xiě)。

　　但是，如果不安裝node.js來(lái)使用“style.less”，則不會(huì)轉(zhuǎn)換“style.css”。

　　我們來(lái)看具體的例子

　　如何寫(xiě)LESS的情況

　　HTML

　　<h2>hello,php中文網(wǎng)！</h2>

　　<h3>hello,php中文網(wǎng)！</h3>

　　LESS

　　@mycolor:blue;

　　h2{

　　font-size:30px;

　　font-color:@mycolor;

　　}

　　h3{

　　font-size:20px;

　　font-color:@mycolor;

　　}

　　瀏覽器顯示效果如下：

　　2345截圖20181127113752.png

　　HTML

　　<h2>hello,php中文網(wǎng)！</h2>

　　<h3>hello,php中文網(wǎng)！</h3>

　　style.css文件

　　h2{

　　font-size:30px;

　　font-color:blue;

　　}

　　h3{

　　font-size:20px;

　　font-color:blue;

　　}

　　這種情況下，如果要將顏色變色，在全部變色的情況下，如果想要改變2個(gè)h2h3的話(huà)，就用變量進(jìn)行如下的描述。

　　@mycolor:blue;

　　h2{

　　font-size:30px;

　　font-color:@mycolor;

　　}

　　h3{

　　font-size:20px;

　　font-color:@mycolor;

　　}

感謝各位的閱讀！關(guān)于“CSS預(yù)處理器如何使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！