1、Sass簡介

Sass 是一種 CSS 的預編譯語言。它提供了 變量（variables）、嵌套（nested rules）、 混合（mixins）、 函數（functions）等功能，并且完全兼容 CSS 語法。Sass 能夠幫助復雜的樣式表更有條理， 并且易于在項目內部或跨項目共享設計。

瀏覽器并不支持 Sass 代碼。因此，你需要使用一個 Sass 預處理器將 Sass 代碼轉換為 CSS 代碼。

在使用 Sass 之前，你需要在項目中安裝它；

1.1、npm安裝步驟：

確保已經安裝了Node.js和npm；

//全局安裝
npm install -g sass
//查看安裝版本
sass --version
//簡寫
sass -v

使用前需要先創建一個SCSS文件，例如common.scss；
sass文件一般保存在.scss的文件中，css則是保存在.css文件中；

其他安裝介紹

2、變量

變量通常用來存儲一些會重復利用的樣式；例如顏色、字體；
格式：$符號作為變量的標志；
命名：變量名是不以數字開頭的可包含字母、數字、下劃線、橫線（連接符），可使用駝峰命名法、下劃線鏈接命名法；
寫法：同css，變量名與值之間用冒號分割；
Sass map ：Sass map 是一種數據結構，允許你存儲一系列的鍵值對，類似于 JavaScript 中的對象

sass變量可以存儲的信息包含：字符串、數字、顏色值、布爾值、列表、null值；

//變量創建
$mainColor:#00b362;//顏色變量
$blackColor:#000;
$fontSize:16px; //數字變量
$fontFamily:"Helvetica Neue", Helvetica, Arial, sans-serif;//字符串變量
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);//Sass map
//變量使用
body{font:14px $fontStack;color: $blackColor;
}
//你可以使用 map-get 函數來獲取特定鍵的值
.ceshi-main{p{font-size: 28rpx;}p:nth-child(1){color: map-get($colorMap, color1);}p:nth-child(2){color: map-get($colorMap, color2);}p:nth-child(3){color: map-get($colorMap, color3);}
}

3、嵌套

Sass 允許您嵌套 CSS 選擇器，嵌套方式 與 HTML 的視覺層次結構相同。請注意，過度嵌套的規則 將導致過度限定的 CSS，這些 CSS 可能很難維護，并且 通常被認為是不好的做法。

使用大括號和縮進來表示層級關系，可以多層嵌套

//.scss嵌套寫法
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}& > p {color: #f00;}& + p {color: #0ff;}&:nth-child(2) a{color: #ff0;}
}

//.css相同層次結構寫法
nav ul {margin: 0;padding: 0;list-style: none;
}
nav li {display: inline-block;
}
nav a {display: block;padding: 6px 12px;text-decoration: none;
}
nav > p{color: #f00;
}
nav + p{color: #0ff;
}
nav:nth-child(2) a{color: #ff0;
}

備注：
nav > p 寫法為后代選擇器，只匹配直接后代；
nav + p 寫法為兄弟組合器，只有與nav相鄰的P標簽會匹配此語法；
nav:nth-child(2) 寫法為偽類選擇器；

<nav><p></p>
</nav>

4、混合@mixin與@include

混合器類似于函數，可以包含可重用的樣式和變量，簡化復雜樣式定義。

@mixin 指令允許我們定義一個可以在整個樣式表中重復使用的樣式。
@include 指令可以將混入（mixin）引入到文檔中。

//定義無參數的混合器
@mixin name{background: #fff;box-shadow: 0 0 1px rgba(0,0,0,.25);color: #222;
}.main{@include name;//使用默認值
}

//定義有參數混合器，name混合器名稱，$theme混合器傳參，#f00參數默認值
@mixin name($theme:#f00){background: $theme;box-shadow: 0 0 1px rgba($theme, .25);color: #fff;
}//使用混合器，使用@include關鍵字
.info{@include name;//使用默認值
}
.success {@include name($theme:#73df8a);//傳參
}

//設置可變參數
@mixin box-shadow($shadows...){-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}//引用
.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

//瀏覽器前綴使用混入
@mixin transform($property) {-webkit-transform: $property;-ms-transform: $property;transform: $property;
}//使用
.myBox {@include transform(rotate(20deg));
}//轉換為css代碼
.myBox {-webkit-transform: rotate(20deg);-ms-transform: rotate(20deg);transform: rotate(20deg);
}

注意：Sass 的連接符號 - 與下劃線符號 _ 是相同的，也就是 @mixin color-set { } 與 @mixin color_set { } 是一樣的混入。

//具體實例設置，定義混合器
@mixin colorSet($bgColor:#fff4e4,$boxColor:#000d8b){background: $bgColor;box-shadow: 0 0 10px rgba($boxColor,0.5);-moz-box-shadow: 0 0 10px rgba($boxColor,0.5);-webkit-box-shadow: 0 0 10px rgba($boxColor,0.5);color: #000;
}
//使用混合器
.ceshi-main{.info{width: 60px;height: 60px;@include colorSet;//使用默認值}.info2{width: 60px;height: 60px;@include colorSet(#edfff1,#00470f);//使用默認值//@include colorSet($bgColor:#edfff1,$boxColor:#00470f);}
}

//渲染結果
.ceshi-main .info{width: 60px;height: 60px;background: #fff4e4;box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);-moz-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);-webkit-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);color: #000;
}
.ceshi-main .info2{width: 60px;height: 60px;background: #edfff1;box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);-moz-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);-webkit-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);color: #000;
}

混合器也支持嵌套

//定義混合器
@mixin mainText($size:14px,$color:#222,$lightColor:#999){color: $color;font-size: $size;p{color: $color;font-size: $size;}span{font-size: 24rpx;color: $lightColor;}
}
//使用混合器
.info{@include mainText;
}
.success{@include mainText(18rpx, #3bc157, #c6e7cd);
}
.error{@include mainText(18rpx, #e73535, #eab7b7);
}

5、sass函數

sass定義了各種類型的函數，字符串相關、數字相關、列表相關、映射相關、選擇器相關、顏色相關等等；
菜鳥教程參考文檔

數字函數

函數	描述&實例
abs(number)	返回一個數值的絕對值
ceil(number)	向上取整
comparable(num1,num2)	返回一個布爾值，判斷num1和num2是否可以進行判斷
floor(number)	向下取整
max(number…)	返回最大值
min(number…)	返回最小值
round(number…)	返回最接近該數的一個整數，四舍五入

abs(15)//結果15
abs(-15)//結果15ceil(15.20)  //結果: 16comparable(15px, 10px)//結果: true
comparable(20mm, 1cm) //結果: true
comparable(35px, 2em) //結果: falsefloor(15.80) //結果: 15max(5, 7, 9, 0, -3, -7) //結果: 9min(5, 7, 9, 0, -3, -7) //結果: -7round(15.20) //結果: 15
round(15.80) //結果: 16

Sass Map(映射)函數

函數	描述&實例
map-get(map, key)	返回 Map 中 key 所對應的 value(值)。如沒有對應的 key，則返回 null 值。
map-has-key(map, key)	判斷 map 是否有對應的 key，存在返回 true，否則返回 false。

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small") //結果: 12pxmap-has-key($font-sizes, "big") //結果: false

6、sass的@import

sass與css類似，支持@import指令；@import 指令可以讓我們導入其他文件等內容；

CSS @import 指令在每次調用時，都會創建一個額外的 HTTP 請求。但，Sass @import 指令將文件包含在 CSS 中，不需要額外的 HTTP 請求。

注意：包含文件時不需要指定文件后綴，Sass 會自動添加后綴 .scss。

//創建index.scss文件
//導入 common.scss文件。
@import "common";

//common.scss文件
html,body,ul,li,ol,p,img,h1,span{margin:0;padding:0;
}