SASS的安裝方式有哪些

SASS是便是一門動態(tài)樣式語言，是一款款強(qiáng)化CSS的輔助工具，它在CSS語法的基礎(chǔ)上，增加了變量，嵌套，混合，導(dǎo)入，函數(shù)的高級功能，這些拓展使CSS更加強(qiáng)大與優(yōu)雅，有助于更好的管理樣式文件，以及更高效的開發(fā)項(xiàng)目。

NPM 安裝

我們可以使用 npm（NPM 使用介紹）來安裝 Sass。

npm install -g sass

注：國內(nèi) npm 建議使用淘寶鏡像來安裝，參考：NPM 國內(nèi)慢的問題解決

Windows 上安裝

我們可以使用 Windows 的包管理器 Chocolatey 來安裝：

choco install sass

Mac OS X (Homebrew)安裝

Mac OS 可以使用 Homebrew 包管理器來安裝：

brew install sass/sass/sass

更多安裝方法可以查看官網(wǎng)：https://sass-lang.com/install

使用介紹

我們的教程使用的是 npm 安裝的 sass，安裝完成后可以查看版本：

$ sass –version 1.22.12 compiled with dart2js 2.5.0 接下來我們創(chuàng)建一個(gè) runoob-test.scss 文件，內(nèi)容為： runoob-test.scss 文件代碼:

/* 定義變量與值 */$bgcolor: lightblue;$textcolor: darkblue;$fontsize: 18px;

/* 使用變量 */
body {
 background-color: $bgcolor;
 color: $textcolor;
 font-size: $fontsize;
}

然后在命令行輸入下面命令，即將 .scss 文件轉(zhuǎn)化的 css 代碼：

$ sass runoob-test.scss
@charset "UTF-8";
/* 定義變量與值 */
/* 使用變量 */
body {
 background-color: lightblue;
 color: darkblue;
 font-size: 18px;
}

我們可以在后面再跟一個(gè) .css 文件名，將代碼保存到文件中：

$ sass runoob-test.scss runoob-test.css

這是會在當(dāng)前目錄下生存 runoob-test.css 文件，代碼如下：

@charset "UTF-8";
/* 定義變量與值 */
/* 使用變量 */
body {
 background-color: lightblue;
 color: darkblue;
 font-size: 18px;
}

/*# sourceMappingURL=runoob-test.css.map */