在完成了Sass代碼的編寫后，我們可以通過node-sass模塊對.scss文件進行編譯。下面主要講解如何將.scss文件編譯成為.css文件，具體如例4-1所示。

【例4-1】

（1）在C:\web\chapter04\Sass目錄下創(chuàng)建color.scss文件，并將Sass語法格式中設(shè)置邊框顏色的代碼添加到color.scss文件中，具體代碼如下。

$highlight-color: #F90;
.selected {
 border: 1px solid $highlight-color;
}

上述代碼中，定義變量$highlight-color的值為#F90；設(shè)置類名為.selected的邊框大小為1px實線，顏色為“#F90”。

在C:\web\chapter04\Sass命令下打開命令行，執(zhí)行如下命令。

node-sass color.scss output.css

上述代碼中，定義變量$highlight-color的值為#F90；設(shè)置類名為.selected的邊框大小為1px實線，顏色為“#F90”。

在C:\web\chapter04\Sass命令下打開命令行，執(zhí)行如下命令。

node-sass color.scss output.css

上述命令執(zhí)行后，會在C:\web\chapter04\Sass目錄中生成編譯后的output.css文件，具體代碼如下。

.selected {
 border: 1px solid #F90;
}

上述代碼中，變量$highlight-color已成功被替換為了#F90，并且編譯后的代碼與基礎(chǔ)CSS樣式代碼相同。

猜你喜歡：

什么是字體圖標(biāo)？有什么優(yōu)勢？

jQuery的語法有什么特點？

如何下載和使用Normalize.css？【移動web頁面開發(fā)】    

黑馬程序員前端與移動開發(fā)培訓(xùn)