Sass 是一個 CSS 前處理器，可以幫助我們減少 CSS 重複的程式碼，節省開發時間。 擴充套件了 CSS3，增加了規則、變數、混入、選擇器、繼承、內建函式等等特性。生成良好格式化的 CSS 程式碼，易於組織和維護，Sass 檔案字尾為.Scss。
一、Sass安裝
NPM 安裝
1.1 我們可以使用npm來安裝 Sass，這是最常用的安裝方式。
首先檢視有沒有下載npm，以下命令可以檢視到是否有下載過npm，已經下載會出現一個版本號 6.12.1
npm -v
1.2 sass一般都使用淘寶 NPM 映象定製的 cnpm，命令列工具代替預設的npm:只需要安裝以下命令就會自動下載安裝一個包。
npm install \-g cnpm \--registry\=https://registry.npm.taobao.org
1.3 然後就可以使用cnpm命令使用這個包，以下就算安裝完成了。
cnpm install -g sass
二、sass的使用方法
2.1 首先要建立2個資料夾，資料夾名稱可以隨便起，再啟動以下命令監聽。
sass --watch sass:css //（sass:css為資料夾名稱，可以自設定）
2.2 在.scss 文件寫入內容，另外一個css資料夾就會自動出現一個css的文件，在寫程式碼時命令視窗不能關閉，負責無法執行css文件程式碼。
2.3 下面是案例 .scss文件程式碼：
$a:#fff;
$b:#000;
body {
color: $a;
background: $b;
width: 500px;
height: 100px;
}會在.css文件出現以下執行程式碼：
body {
color: #fff;
background: #000;
width: 500px;
height: 100px;
}
/*# sourceMappingURL=a.css.map */三、sass的變數
3.1 Sass 變數使用$符號：變數用於儲存一些資訊，它可以重複使用。
Sass 變數可以儲存以下資訊：
- 字串
- 數字
- 顏色值
- 布林值
- 列表
- null 值
3.2 以下例項設定了四個變數：myFont, myColor, myFontSize, 和 myWidth。
變數宣告後我們就可以在程式碼中使用它：
$myFont:Helvetica,sans-serif;
$myColor:red;
$myFontSize:18px;
$myWidth:680px;
body{
font-family:$myFont;
font-size:$myFontSize;
color:$myColor;
}
#container{
width:$myWidth;
}將以上程式碼轉換為 CSS 程式碼，如下所示：
body{
font-family:Helvetica,sans-serif;
font-size:18px;
color:red;
}
#container{
width:680px;
}3.3 Sass變數的作用域,只能在當前的層級上有效果，如下所示 h1 的樣式為它內部定義的 green，p 標籤則是為 red。
$myColor:red;
h1{
$myColor:green;// 只在 h1 裡頭有用，區域性作用域
color:$myColor;
}
p{
color:$myColor;
}將以上程式碼轉換為 CSS 程式碼，如下所示：
h1{
color:green;
}
p{
color:red;
}四、Sass 巢狀規則與屬性
4.1 Sass 巢狀 CSS 選擇器類似於 HTML 的巢狀規則。
如下我們巢狀一個導航欄的樣式：
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px12px;
text-decoration:none;
}
}例項中，ul, li, 和 a 選擇器都巢狀在 nav 選擇器中
將以上程式碼轉換為 CSS 程式碼，如下所示：
nav ul{
margin:0;
padding:0;
list-style:none;
}
nav li{
display:inline-block;
}
nav a{
display:block;
padding:6px12px;
text-decoration:none;
}4.2 Sass巢狀屬性很多,在 Sass中，我們可以使用巢狀屬性來編寫它們,會省事很多，以下sass的程式碼如下：
font:{
family:Helvetica,sans-serif;
size:18px;
weight:bold;
}
text:{
align:center;
transform:lowercase;
overflow:hidden;
}將以上程式碼轉換為 CSS 程式碼，如下所示：
font-family:Helvetica,sans-serif;
font-size:18px;
font-weight:bold;
text-align:center;
text-transform:lowercase;
text-overflow:hidden;總結：
以上是sass的基本簡單介紹，sass還有比較深入複雜的方法，大家也可以去sass官網深入學習，網址：https://www.sasscss.com/getting-started/
。
作者：湯清麗
日期：2020-1-6
微信：lenat666
本作品採用《CC 協議》，轉載必須註明作者和本文連結