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

如何將.scss文件編譯成為.css文件？【Scss編譯】

更新時間:2021年05月12日14時54分來源:傳智教育瀏覽次數(shù):

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

猜你喜歡：

Sass語言如何聲明和引用變量？

上一篇： Sass語言如何聲明和引用變量？ 下一篇：js如何將json字符串轉(zhuǎn)換為json對象？

最新資訊