【Css】SCSS基本語法
1.Sass安裝（Windows版）
npm install -g sass
2.預處理
sass src/assets/main.scss(輸入檔案) src/assets/output.css(輸出檔案)
還可以利用--watch引數來監視單個檔案或目錄。--watch引數告訴 Sass監聽原始檔的變化， 並在每次儲存 Sass 檔案時重新編譯為CSS。如果你只是想監視 （而不是手動構建）input.scss檔案，你只需在 sass命令後面新增--watch引數即可。
監聽檔案：
sass --watch input.scss output.css
監聽目錄：（可以使用資料夾路徑作為輸入和輸出，並使用冒號分隔它們，來監聽檔案並輸出到目錄。）
sass --watch app/sass:public/stylesheets
Sass 將會監聽app/sass目錄下所有檔案的變動，並 編譯CSS到public/stylesheets目錄下。
2.1巢狀輸出方式nested
sass --watch test.scss:test.css --style nested
2.2展開輸出方式expanded
sass --watch test.scss:test.css --style expanded
2.3展開輸出方式compact
sass --watch test.scss:test.css --style compact
2.4展開輸出方式compressed
sass --watch test.scss:test.css --style compressed
3.scss語法格式
Scss：
SCSS SYNTAX $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
Sass：
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
預處理後的css：
body { font: 100% Helvetica, sans-serif; color: #333; }
4.變數（variables）、巢狀（nested rules）、混合（mixins）、函式（functions）等功能
4.1變數
語法：$+變數名+：+變數值；
$width:200px;
4.1.1普通變數和預設變數
- 普通變數聲明後可以在全域性範圍內使用；
- 預設變數僅需在值後面加上!default 即可；
- 預設變數一般是用來設定預設值，然後根據需求來覆蓋的，覆蓋的方式是在預設變數之前重新宣告下變數即可。預設變數的價值在進行元件化開發的時候會非常有用。
$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body { line-height: $baseLineHeight; }
編譯後的CSS程式碼：
body { line-height:2; }
4.1.2區域性變數和全域性變數
- 區域性變數：在元素裡面宣告的變數；
- 全域性變數：在元素外面定義的變數；
- 全域性變數的影子：和全域性變數名字相同的區域性變數叫做全域性變數的影子。
4.2sass巢狀
4.2.1選擇器巢狀
css：
nav a { color:red; } header nav a { color:green; }
scss:
nav { a { color: red; header & { color:green; } } }
4.2.2屬性巢狀
css:
.box { font-size: 12px; font-weight: bold; }
scss:
.box { font: { size: 12px; weight: bold; } }
4.2.3偽類巢狀
scss:.clearfix { &: before,&:after { content:""; display: table; } &:after { clear: both; overflow: hidden; } }
css：
clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
4.3sass混合巨集
4.3.1宣告混合巨集
@mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; }
@mixin :宣告混合巨集的關鍵詞；
border-radius:混合巨集的名稱；
大括號內：複用的樣式程式碼；
4.3.2呼叫混合巨集
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }//宣告混合巨集border-radius button { @include border-radius; }//呼叫混合巨集border-radius
編譯為CSS：
button { -webkit-border-radius: 3px; border-radius: 3px; }
4.3.3混合巨集的引數
4.3.3.1不帶任何值的引數
@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }//宣告一個帶有引數$radius的混合巨集 .box { @include border-radius(3px);//呼叫混合巨集並給混合巨集傳引數“3px” }
4.3.3.2傳一個帶值引數（傳入一個預設值）
@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }//宣告一個傳入了預設引數值的混合巨集 .btn { @include border-radius;//使用預設引數值的混合巨集 } .box { @include border-radius(50%);//可以自己傳入引數值 }
編譯出來的CSS：
.btn { -webkit-border-radius: 3px; border-radius: 3px; } .box { -webkit-border-radius: 50%; border-radius: 50%; }
4.3.3.3傳多個引數值
@mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); }
編譯出來的css：
.box-center { width: 500px; height: 300px; }
4.4.sass 繼承
scss：
.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; }
編譯出來後：
.btn, .btn-primary { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; }
4.5sass佔位符%
用佔位符宣告的程式碼，如果不被@extend呼叫就不會被編譯。
%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { color:red; }
編譯後：
.btn { color:red; }//%佔位符宣告的程式碼沒有被編譯產生css程式碼
使用@extend呼叫：
%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5;//使用@extend呼叫佔位符程式碼 @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }
編譯後的css程式碼：
.btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }
通過@extend呼叫的佔位符，編譯出來的程式碼會將相同的程式碼合併在一起，程式碼變得十分簡潔。
4.6sass插值
4.6.1示例
$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties {//對每個在$properties中的$prop,即$properties中的margin、padding #{$prop}-#{$side}: $value;//$prop連線引數$side，值為引數$value } } .login-box { @include set-value(top, 14px);//呼叫混合巨集 }
編譯出來的css：
.login-box { margin-top: 14px; padding-top: 14px; }
4.6.2不可以1：
$margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin set-value($size) { margin-top: $margin-#{$size}; } .login-box { @include set-value(big); }
插值不能用在屬性的值中，也就是不能出現在冒號後邊，否則會報錯，無法識別。上面的 Sass 程式碼編譯出來，你會得到下面的資訊：
error style.scss (Line 5: Undefined variable: “$margin-".)
在冒號左邊是可以成功的：
@mixin set-value($type) { #{$type}-top: 20px; } .login-box { @include set-value(margin); }
4.6.3不可以2：
@mixin updated-status { margin-top: 20px; background: #F00; } $flag: "status"; .navigation { @include updated-#{$flag}; }
不能用來呼叫混合巨集，如@include updated-#{$flag} ，這裡的插值同樣不會被識別。（@extend後邊使用插值是可以的）。
4.6.4可以在使用@extend時使用插值：
%updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }
4.7sass 註釋
/*註釋內容*/ :會在編譯出來的css檔案中顯示 //註釋內容 ：不會在編譯出來的css檔案中顯示
//定義一個佔位符 %mt5 { margin-top: 5px; } /*呼叫一個佔位符*/ .box { @extend %mt5; }
編譯出來的css：
.box { margin-top: 5px; } /*呼叫一個佔位符*/
4.8sass運算
4.8.1sass 加法/減法
4.8.1.1變數或屬性中都可以做加法/減法運算
.box { width: 20px + 8in; height:20px - 5px; }
in：
英寸（Inches）。絕對長度單位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
編譯出來的css：
.box { width: 788px; height: 15px; }
4.8.1.2不用型別的單位做加法/減法會報錯：
.box { width: 20px + 1em;//不同型別單位不能做加法 }
4.8.2sass 乘法
.box { width: 10px * 2; }
以下寫法有問題：
.box { width:10px * 2px; }
編譯出來的css：
.box { width: 20px; }
同加法減法一樣，不同型別單位做乘法也會報錯。
4.8.3sass除法
如果除式中沒有變數或者不是在一個數學表示式中（有加法減法等），就要將除式運算用小括號括起來，否則“/”不會被當做除號運算。
p { font: 10px/8px; // 純 CSS，不是除法運算 $width: 1000px; width: $width/2; // 使用了變數，是除法運算 width: round(1.5)/2; // 使用了函式，是除法運算 height: (500px/2); // 使用了圓括號，是除法運算 margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算 }
編譯出來的css：
p { font: 10px/8px;//這種是無意義的css width: 500px; height: 250px; margin-left: 9px; }
除法中相同單位相除不會報錯，會產生一個無單位的值：
.container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }
編譯出的css：
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
4.8.4sass 變數計算
$content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width + $sidebar-width + $gutter; }
編譯出來的css：
.container { width: 960px; }
4.8.5sass數字運算
.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }
編譯出來的css：
.box { width: 60px; }
4.8.6sass顏色運算
4.8.6.1所有算術運算都支援顏色值，並且是分段計算的。
p { color: #010203 + #040506; }
計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 並且被合成為：
p { color: #050709; }
4.8.6.2數字和顏色一起運算：
p { color: #010203 * 2; }
計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 並且被合成為：
p { color: #020406; }
4.8.7sass 字元運算
4.8.7.1用“+”對字串進行連線：
$content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; }
編譯出來的css：
.box:before { content: " Hello Sass! "; }
4.8.7.2可以使用“+”直接連線字元：
div { cursor: e + -resize; }
編譯出來的css：
div { cursor: e-resize; }
有引號的字串和沒有引號的字串相加，看哪個在“+”號的左邊，如果有引號的在左邊，結果為有引號的；如果沒有引號的在左邊，結果為沒有引號的：
p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }
編譯出來的css：
p:before { content: "Foo Bar"; font-family: sans-serif; }
參考：
https://www.jianshu.com/p/fa379a309c8a
https://blog.csdn.net/weixin_33724046/article/details/93747728
官網：
https://sass.bootcss.com/guide
p {
color: #010203 + #040506;
}