CSS中有時可能會發生程式碼的衝突，並且無法執行變量，算術計算等。透過使用CSS預處理器可以進行編寫接近變數和四規運算等程式的寫法，所以，接下來的這篇文章就來跟大家分享關於如何使用CSS預處理器的方法。
我們先來看看什麼是CSS預處理器？
預設的CSS是目前無法實現的描述，CSS預處理器是為了有效描述CSS的東西。
但是，CSS預處理器不能在瀏覽器中使用。
雖然有各種各樣的Sass，Less，但到目前為止它似乎仍然很難再CSS中描述，不過是被稱為「新的CSS擴充版本」。
主要的預處理器類型
Sass
#Sass是透過轉換scsss的CSS文件，擴展名是「.scss」使用變量和公式加入CSS編程風格。
透過轉換（編譯）「style.scss」的Sass文件，您可以建立「style.css」。
要使用它，你必須安裝ruby。
LESS
LESS就轉換（編譯）像Sass這樣的LESS檔。
變數的概念可以更少，因此您可以計算它，也可以分層次地編寫。
但是，如果不安裝node.js來使用“style.less”，則不會轉換“style.css”。
我們來看具體的範例
如何寫LESS的情況
HTML
<h1>hello,php中文网！</h1> <h2>hello,php中文网！</h2>
LESS
@mycolor: blue;
h1 {
font-size: 30px;
font-color: @mycolor;
}
h2 {
font-size: 20px;
font-color: @mycolor;
}瀏覽器顯示效果如下：
#HTML
<h1>hello,php中文网！</h1> <h2>hello,php中文网！</h2>
style.css檔案
h1 {
font-size: 30px;
font-color: blue;
}
h2 {
font-size: 20px;
font-color: blue;
}這種情況下，如果要將顏色變色，在全部變色的情況下，如果想要改變2個h1h2的話，就用變數進行如下的描述。
@mycolor: blue;
h1 {
font-size: 30px;
font-color: @mycolor;
}
h2 {
font-size: 20px;
font-color: @mycolor;
}
以上是CSS預處理器怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
