前言
Sass 是一個(gè) CSS 預(yù)處理器，可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開(kāi)發(fā)時(shí)間。 擴(kuò)展了 CSS3，增加了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等等特性。生成良好格式化的 CSS 代碼，易于組織和維護(hù)，Sass 文件后綴為.Scss。
一、Sass安裝
NPM 安裝
1.1 我們可以使用npm來(lái)安裝 Sass，這是最常用的安裝方式。
首先查看有沒(méi)有下載npm，以下命令可以查看到是否有下載過(guò)npm，已經(jīng)下載會(huì)出現(xiàn)一個(gè)版本號(hào) 6.12.1
npm -v
1.2 sass一般都使用淘寶 NPM 鏡像定制的 cnpm，命令行工具代替默認(rèn)的npm:只需要安裝以下命令就會(huì)自動(dòng)下載安裝一個(gè)包。
npm install \-g cnpm \--registry\=https://registry.npm.taobao.org
1.3 然后就可以使用cnpm命令使用這個(gè)包，以下就算安裝完成了。
cnpm install -g sass
二、sass的使用方法
2.1 首先要建立2個(gè)文件夾，文件夾名稱可以隨便起，再啟動(dòng)以下命令監(jiān)聽(tīng)。
sass --watch sass:css //(sass:css為文件夾名稱，可以自設(shè)定)
2.2 在.scss 文檔寫(xiě)入內(nèi)容，另外一個(gè)css文件夾就會(huì)自動(dòng)出現(xiàn)一個(gè)css的文檔，在寫(xiě)代碼時(shí)命令窗口不能關(guān)閉，負(fù)責(zé)無(wú)法執(zhí)行css文檔代碼。
2.3 下面是案例 .scss文檔代碼：
$a:#fff;
$b:#000;
body {
color: $a;
background: $b;
width: 500px;
height: 100px;
}
會(huì)在.css文檔出現(xiàn)以下執(zhí)行代碼：
body {
color: #fff;
background: #000;
width: 500px;
height: 100px;
}
/*# sourceMappingURL=a.css.map */
三、sass的變量
3.1 Sass 變量使用$符號(hào)：變量用于存儲(chǔ)一些信息，它可以重復(fù)使用。
Sass 變量可以存儲(chǔ)以下信息：
字符串
數(shù)字
顏色值
布爾值
列表
null 值
3.2 以下實(shí)例設(shè)置了四個(gè)變量：myFont, myColor, myFontSize, 和 myWidth。
變量聲明后我們就可以在代碼中使用它：
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
3.3 Sass變量的作用域,只能在當(dāng)前的層級(jí)上有效果，如下所示 h1 的樣式為它內(nèi)部定義的 green，p 標(biāo)簽則是為 red。
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
四、Sass 嵌套規(guī)則與屬性
4.1 Sass 嵌套 CSS 選擇器類似于 HTML 的嵌套規(guī)則。
如下我們嵌套一個(gè)導(dǎo)航欄的樣式：
實(shí)例中，ul, li, 和 a 選擇器都嵌套在 nav 選擇器中
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
4.2 Sass嵌套屬性很多,在 Sass中，我們可以使用嵌套屬性來(lái)編寫(xiě)它們,會(huì)省事很多，以下sass的代碼如下：
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
總結(jié)：
以上是sass的基本簡(jiǎn)單介紹，sass還有比較深入復(fù)雜的方法，大家也可以去sass官網(wǎng)深入學(xué)習(xí)，網(wǎng)址：https://www.sasscss.com/getting-started/
。
聯(lián)系客服
