建站
咨詢
售后
建站咨詢
新聞中心
Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更加強大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項目
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供新都企業(yè)網(wǎng)站建設,專注與成都網(wǎng)站設計、網(wǎng)站制作、H5建站、小程序制作等業(yè)務。10年已為新都眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。
NPM 安裝
我們可以使用 npm（NPM 使用介紹）來安裝 Sass。
npm install -g sass
注：國內 npm 建議使用淘寶鏡像來安裝，參考：NPM 國內慢的問題解決
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)建一個 runoob-test.scss 文件，內容為： runoob-test.scss 文件代碼:
/* 定義變量與值 */
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;
/* 使用變量 */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;
}
然后在命令行輸入下面命令，即將 .scss 文件轉化的 css 代碼：
$ sass runoob-test.scss
@charset "UTF-8";
/* 定義變量與值 */
/* 使用變量 */
body {
background-color: lightblue;
color: darkblue;
font-size: 18px;
}
我們可以在后面再跟一個 .css 文件名，將代碼保存到文件中：
$ sass runoob-test.scss runoob-test.css
這是會在當前目錄下生存 runoob-test.css 文件，代碼如下：
@charset "UTF-8";
/* 定義變量與值 */
/* 使用變量 */
body {
background-color: lightblue;
color: darkblue;
font-size: 18px;
}
/*# sourceMappingURL=runoob-test.css.map */
當前題目：詳解Sass的安裝步驟
文章轉載：http://www.dlmjj.cn/article/cdpeejs.html
