首先要了解什么是CSS 預處理器？ SCSS是一種CSS預處理語言
定義了一種新的專門的編程語言，編譯后形成正常的css文件，為css增加一些編程特性，無需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。CSS預處理語言有SCSS (SASS) 和LESS、POSTCSS
那么SCSS和SASS 有什么區別呢
· 文件擴展名不同，文件后綴分別是“.scss”和“.sass”
· sass是以嚴格縮進語法規則來編寫代碼的，不包括大括號和分號，而scss的語法和css書寫語法類似；sass的安裝和使用不細說了；
· scss是sass3.0引入的語法，可以理解scss是sass的一個升級版本，是一種SCSS-like語言，彌補了sass和css之間的鴻溝；
這篇文章是記錄的在VUE項目中SCSS的使用
vue項目上安裝SCSS和開發入門
① 使用vue-cli模板創建新項目：vue init webpack myvue
② 安裝sass 依賴包 ，在cmd界面輸入：
npm install sass-loader --save-dev
npm install node-sass --sava-dev
③ 在build文件夾下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
④ 使用scss時候在所在的style樣式標簽上添加lang=”scss”即可應用對應的語法，否則報錯
⑤ scss使用測試：如下測試修改字體顏色
<style lang="scss">
$color:red;
div {color:$color;}
</style>
那么進一步了解SCSS 的使用語法 ??
SCSS語法：
·注釋
注釋分為三種：/* */css中顯示，//css中不顯示，/*重要注釋!*/壓縮不會被刪掉。
·@import 命令導入外部sass、scss、css文件
<style lang="scss">
@import './test.scss'; //導入外部scss文件
.myText {
border:1px solid red;
}
</style>
·變量
聲明變量的語法是：$+變量名+：+變量值；如下
$color:red; //聲明變量 $color
區分默認變量
默認變量只需要在變量值后加上 !default , 用來設置默認值 ，對默認變量進行重新聲明可以實現覆蓋默認值；如
$color:red !default; //聲明默認變量 $color
$color:purple; //根據需求覆蓋默認變量
.father01 {
color:$color;
}
區分全局變量和局部變量
全局變量是元素外聲明的變量，局部變量是在元素里聲明的變量，重復聲明時局部變量會覆蓋全局變量；
$height:200px; //全局變量聲明不在大花括號內
$bgcolor:blue;
body {
.father01 { //嵌套
width:$width;
height:$height;
$border:1px solid red; //局部變量是聲明在元素內的
border: $border;
$bgcolor:purple; //全局變量和局部變量名一致時，調用局部變量進行覆蓋
background-color: $bgcolor;
}
}
局部變量值后加上 !global 關鍵詞可以使得局部變量變成全局變量；
body {
.father01 {
width:200px;
height:200px;
$border:1px solid red !global; //使用global關鍵詞將$border變為了全局變量
border:$border;
}
.father02 {
width: 300px;
height:300px;
border:$border; //使用全局變量
}
}
·變量嵌套引用：即字符串插值，需要使用 #{} 來進行包裹
$left:left;
.father02 {
width: 300px;
height:300px;
border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值之前必須先聲明
}
·變量計算
$left:left;
.father02 {
width: 300px;
height:300px;
border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值之前必須先聲明
}
·嵌套
選擇器嵌套不多說了
屬性嵌套（有相同屬性前綴）如下
border:{
color:red;
width:5px;
style:solid;
}
在嵌套時候可以使用 & 來引用父元素
.container {
&>p { //可以編譯成CSS的 .container>p {} 效果
color:purple;
}
}
·繼承
繼承 .class 使用 @extend
.container {
color:purple;
border:2px dashed purple;
}
.myText {
@extend .container; //這里將繼承.container類的所有樣式
font-size: 22px;
}
·SCSS占位符 %
使用% 聲明的代碼塊，如果不被@extend調用的話就不會被編譯。編譯出來的代碼會將相同的代碼合並在一起，代碼變得十分簡潔。
%m5 { background-color: lightblue;}
.P1 { @extend %m5; }
·重復代碼塊，使用混合@mixin命令定義，以及使用@include調用該mixin
@mixin normalStyle {
//使用@mixin命令定義可重復使用的代碼塊
width:300px;
height:100px;
color:black;
background-color:lightblue;
}
.container {
@include normalStyle;
//使用@include 命令引用@mixin定義的代碼塊
}
在使用@mixin和@include時，傳入參數和默認值
@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
width:$width;
height:$height;
color:$color;
background-color:$defaultValue;
}
.container {
@include normalStyle(300px,100px,green,lightgray);
}
SCSS使用編程式方法
·條件語句
.container {
p {
@if 1+1<3 {
border:1px solid blue;
} @else {
border:1ps dashed palevioletred;
}
}
}
·SCSS中的三種循環
for循環
在sass中的@for循環有兩種方式：
①@for $i from <start> through <end>
②@for $i from <start> to <end>
其中$i表示變量，start表示開始值，end表示結束值；
through表示包括end這個數值；to表示不包括end這個數值；
while循環
只要@while后面的條件為true就會執行，直到表達式值為false時停止循環；
each in循環
就是去遍歷一個列表，然后從列表中取出對用值；他的指令形式為：@each $var in <list>($var為變量值，list為sassscript表達式）
//for 循環
@for $i from 1 to 5 {
.item-#{$i} {
border:#{$i}px solid;
}
}
//while 循環
$m:8;
@while $m > 0 {
.items-#{$m} {
width:2em*$m;
}
$m:$m - 2 ;
}
//這里可以對$m進行運算 讓它每次都減去2
//each 語法
@each $item in class01,class02 { //$item就是遍歷了in關鍵詞后面的類名列
.#{$item} {
background-color:purple;
}
}
//會編譯成 .class01 , .class02 {background-color:purple;}
·使用@function 自定義函數及使用
@function double($sn){ //SCSS允許自定義函數
@return $sn*2;
}
.myText {
border:1px solid red;
width:double(200px); //使用在SCSS中自定義的函數
}
·可以直接使用SCSS內置的顏色函數，
.myText {
color:black;
&:hover{
//以下的lighten()、darken()等是SCSS內置的顏色函數
color:lighten(#cc3, 10%); // #d6d65c顏色變淺
color:darken(#cc3, 10%); // #a3a329顏色加深
color:grayscale(#cc3); // #d6d65c
color:complement(#cc3); // #a3a329
}
}
參考：https://blog.csdn.net/zhouzuoluo/article/details/81010331