1. 引言
CSS3之前的CSS都大都是枚舉屬性樣式，而編程語言強大的變量、函數、循環、分支等功能基本都不能在CSS中使用，讓CSS的編程黯淡無光，Sass就是一種增強CSS編程的擴展語言（CSS4也可以期待），有了像Sass這種預處理語言后，CSS的編程不再局限在枚舉屬性了，可以有更廣闊的舞臺。
2. Sass的原理
Sass本質就是在CSS的語法的基礎上增加了自定義的變量、循環、分支、函數、mixin、繼承、運算等功能，讓CSS編程變得異常強大。
當然瀏覽器是不認識Sass語法。開發人員寫完了Sass的語法文件后需要通過工具轉成原始的CSS代碼。
//sass 代碼
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
// 通過工具將上面的sass代碼可以轉成下面的CSS代碼↓↓↓
//css 代碼
//-------------------------------
body{
font-size:12px;
}
3. Sass的編譯環境
Sass代碼的編譯轉換工具可以用sass命令行工具、gulp、開發工具插件、webpack等。
我推薦大家學習階段直接用開發工具的插件自動生成即可。如果你是在項目階段使用，那肯定有自動化的流程構建工具比如：gulp、webpack都有對應的插件或者loader，直接對應配置即可。
老馬推薦vscode的自動編譯Sass文件的插件：Live Sass Compiler
使用方法：
第一步： 用vscode打開scss文件。
第二步：ctrl+shift+p(mac ctrl→command）輸入sass選擇入下圖選項
4. Sass的兩種文件后綴
sass有兩種后綴名文件：一種后綴名為sass，語法要求不使用大括號和分號；另一種就是我們這里使用的scss文件，這種和我們平時寫的CSS文件格式差不多，使用大括號和分號。
//文件后綴名為sass的語法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后綴名為scss的語法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
老馬推薦使用scss文件后綴及使用括號和分號的編寫方式。
5. Sass中的變量和注釋
5.1 定義變量及使用
Sass的變量必須是$開頭，后面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣）。
$a-color: blue; // 定義變量。
.box {
color: $a-color; // => blue 使用變量
}
用vscode插件轉換一下試試？
5.2 局部變量和全局變量。
變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換為全局變量可以添加 !global 聲明。
//sass style
//-------------------------------
$a-color: blue; // 全局變量
.box {
$a-color: red; // 局部變量，box內部不使用。
color: $a-color; // => red 局部變量
}
.child {
color: $a-color; // => blue 全局變量
$main-width: 16em !global; // 在局部定義全局的變量。
}
.main {
width: $main-width; // 使用在內部定義的全局變量。
}
/*===============生成的CSS代碼===================*/
.box {
color: red;
}
.child {
color: blue;
}
.main {
width: 16em;
}
從以上代碼中也可以看到Sass支持CSS的注釋/**/之外還支持雙斜線的注釋: //
5.3 特殊變量
如果變量作為CSS屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用。
//sass style
//-------------------------------
$side: top;
.box {
border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box {
border-top: 1px solid #0098cc;
}
6. 嵌套(Nesting)
6.1 嵌套規則 (Nested Rules)
Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器。
//sass style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
6.2 父選擇器 & (Referencing Parent Selectors: &)
在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，可以用 & 代表嵌套規則外層的父選擇器。
//sass style
//-------------------------------
.box {
border-#{$side}: 1px solid #09c;
&::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
}
//css style
//-------------------------------
.box {
border-top: 1px solid #09c;
}
.box::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
& 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復合的選擇器。
//sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
6.3 @at-root
@at-root用來跳出當前選擇器嵌套。
//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
7. 運算
Sass支持多種數據類型的變量，比如：
- 數字，1, 2, 13, 10px
- 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
- 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
- 布爾型，true, false
- 空值，null
所有數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。
7.1 數值運算
Sass支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值。
//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 數字加法運算
width: (75rem/16); // => 4.6875rem 除法運算
color: #303030*2; // => #606060; 乘法運算（顏色運算）
padding: 20px - 3; // => 17pex 數字減法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 帶括號的運算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
8. Sass語句
Sass提供了常用的循環、判斷分支語句的相關指令，可以讓我們按照編程語言一樣編寫Sass代碼。
8.1 if語句
當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼。
//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 { // 簡單if判斷語句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // if else 語句
width: 900px;
}
@if $type == ocean { // 多個if和else語句
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.box {
color: red;
width: 960px;
color: green;
}
@if 聲明后面可以跟多個 @else if 聲明，或者一個 @else 聲明。
如果 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，如果全部失敗，最后執行 @else 聲明
8.2 for循環語句
@for 指令可以在限制的范圍內重復輸出格式。類似for循環。
兩種格式：
-
@for $var from <start> through <end>:條件范圍包含 <start> 與 <end> 的值 -
@for $var from <start> to <end>: 圍只包含 <start> 的值不包含 <end> 的值
//scss style
//------------for througth循環-------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
//scss style
//------------for to 循環-------------------
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 { width: 2em; }
.item-2 { width: 4em; }
8.3 each循環
@each 指令的格式是 $var in <list>, $var 可以是任何變量名，比如 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。
//sass style
//-------------------------------
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
復雜對應each
//sass style
//-------------------------------
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
9. 混合指令 (Mixin Directives)
9.1 不帶參數的簡單Mixin
混合指令（Mixin）用于定義可重復使用的樣式，可以直接把一整段Sass代碼替換到某個地方去。
//sass style
//-------------------------------
// 定義mixin reset, 用@mixin開頭，后面跟空格和混合塊的名字。然后是語句塊
@mixin reset {
padding: 0;
margin: 0;
}
html, body, div , input {
@include reset(); // 引用 reset 混合塊。用@include指令引用混合塊。
}
//css style
//-------------------------------
html, body, div, input {
padding: 0;
margin: 0;
}
9.2 帶參數的Mixin
Mixin還可也添加參數，跟函數一樣使用。
//sass style
//-------------------------------
@mixin sexy-border($color, $width) {
border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p {
border: 1px solid blue;
}
10. 函數指令 (Function Directives)
雖然Mixin功能強大，但是某些場景下還是函數應用更方便，Sass也提供了自定義函數的用法。
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定義自定義函數 grid-width
@function grid-width($n) { // 接受一個參數$n
@return $n * $grid-width + ($n - 1) * $gutter-width; // 返回值。
}
#sidebar { width: grid-width(5); } // 在屬性中調用函數
//css style
//-------------------------------
#sidebar {
width: 240px;
}
11. 繼承(擴展)
11.1 基本繼承
sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，并聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend，后面緊跟需要繼承的選擇器。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
11.2 占位符%
可以定義占位選擇器 %。這種選擇器的優勢在于：如果不調用則不會有任何多余的css文件，避免了以前在一些基礎的文件中預定義了很多基礎的樣式，然后實際應用中不管是否使用了 @extend去繼承相應的樣式，都會解析出來所有的樣式。占位選擇器以 %標識定義，通過 @extend調用。
//sass style
//-------------------------------
%ir { // 定義占位符。沒有選擇器名字的一段代碼而已。
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1, .ir {
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1 {
width: 300px;
}
12. 導入文件
Sass的導入( @import)Sass文件規則和CSS的有所不同，編譯時會將 @import的scss文件合并進來只生成一個CSS文件。
但是如果你在Sass文件中導入css文件如 @import 'reset.css'，那效果跟普通CSS導入樣式文件一樣，導入的css文件不會合并到編譯后的文件中，而是以 @import方式存在。
所有的Sass導入文件都可以忽略后綴名 .scss。一般來說基礎的文件命名方法以_開頭，如 _mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成 @import "mixin"。
例如： a.scss 文件
//a.scss
//-------------------------------
body {
background: #eee;
}
main.scss 主文件。
//sass style
//-------------------------------
@import "reset.css"; // 導入css文件，不會進行編譯。
@import "a"; // 導入a.scss 文件，后綴省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
參考列表：
聯系老馬
對應視頻地址：https://qtxh.ke.qq.com/
老馬qq： 515154084
老馬微信：請掃碼
