教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

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

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

傳智教育-一樣的教育，不一樣的品質(zhì)

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

【例4-1】

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

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

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

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

node-sass color.scss output.css

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

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

node-sass color.scss output.css

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

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

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

猜你喜歡：

Sass語(yǔ)言如何聲明和引用變量？

Vue如何監(jiān)控某個(gè)屬性值的變化？【前端技術(shù)文章】

常見(jiàn)的Javascript數(shù)據(jù)類(lèi)型有哪些?

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到：
和我們?cè)诰€(xiàn)交談！