首頁技術(shù)文章正文

怎樣將.scss文件編譯成為.css文件?

更新時間:2021-05-12 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

在完成了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樣式代碼相同。

1620802886425_scss編譯.jpg


猜你喜歡:

什么是字體圖標?有什么優(yōu)勢?

jQuery的語法有什么特點?

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!