新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
詳解SASS的安裝方式
SASS是便是一門動態(tài)樣式語言,是一款款強化CSS的輔助工具,它在CSS語法的基礎上,增加了變量,嵌套,混合,導入,函數(shù)的高級功能,這些拓展使CSS更加強大與優(yōu)雅,有助于更好的管理樣式文件,以及更高效的開發(fā)項目。

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)建一個 runoob-test.scss 文件,內(nèi)容為: 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的安裝方式
標題網(wǎng)址:http://m.5511xx.com/article/cdpjpis.html


咨詢
建站咨詢
