（文章是 博主根據自己所學以及經驗創作，如存在錯誤之處歡迎提出指正，不喜勿噴！）

1. scss與less都是css的前處理器，首先我們的明白為什麼要用scss與less，因為css只是一種標記語言，其中並沒有函式變數之類的，所以當寫複雜的樣式時必然存在侷限性，不靈活，而scss與less正好為css提供這些，讓css可以像程式設計一樣靈活書寫樣式，而且scss與還提供了一些css相容性的處理，所以運用scss就不需要像寫css時隊友的語法需要做hack處理。SCSS 是 Sass 3 引入新的語法，其語法完全相容 CSS3，並且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 檔案。
2. 本文我們只對scss介紹，其實less都差不多，當你使用scss語法是要用.scss字尾，使用sass語法時用.sass字尾。
3. 在vue專案中的使用：

• 安裝：在命令列中輸入：npm install node-sass sass-loader --save-dev
• 在樣式中宣告使用scss:<style lang=scss scoped><style>（到這裡就可以愉快的使用scss語法了）
• 注：在webpack.config.js中不需要配置使用sass-loader，因為vue-loader會自動解析

4. scss常用語法簡介：

1.自定義變數以及子元素書寫：

<style lang=scss scoped>
/*scss的使用:*/
/*1.自定義變數*/
$color:pink; 
$width:200px;
$height:200px;
$right:right;
$num:2;
.test{
	background:$color;
	width:$width;
	height:$height;
	margin:30px auto;
	/*插入變數*/
	border-#{$right}:2px solid blue;
	/*子元素的書寫*/
	p{
		color:orange;
		font-size: 30px;
	}
}

2.樣式的加減乘除以及繼承樣式：

.p{
	background:yellowgreen;
}
.test2{
	/*樣式的加減乘除，自定義變數再使用*/
	width:$num*100px;
	height:$num*50px;
	border:(1px+1px) solid orange;
	/*樣式的繼承*/
	@extend .p;
}

3.樣式的複用：

/*程式碼的複用,相當於自定義一個函式，並且可以 傳參*/
@mixin box($height){
	height:$height;
	width:200px;
	border:1px solid deeppink;
}
.test3{
	/*呼叫*/
	@include box(200px);
}

4.使用if語句：

/*使用if語句判斷使用哪套樣式，lightness是scss中的一個函式，用來判斷色彩度，$color為傳入的自定義引數*/
.test4{
	@if lightness($color)<30%{
		width:50px;
		height:50px;
		background:cyan;
	}@else{
		width:50px;
		height:50px;
		background:yellow;
	}
}

5.scss的三種迴圈：for   while   each：

/*迴圈語法，包括最常見的三種迴圈方法，for,while,each,*/
/*其中迴圈包含開始不包含結束量,如下不包含5*/
@for $i from 1 to 5{
	.R#{$i}{
		width:$i*20px;
		height:$i*20px;
		/*注意:變數帶單位時不能寫成($i)px;應該寫:#{$i}px*/
		border:#{$i}px solid olive;
	}
}

6.scss中的函式：

/*函式使用*/
@function double ($num){
	@return $num*2
}
.test5{
	font-size: double(20px);
	color:gold;
}

結語：scss的常用語法就到這裡了，希望能幫到大家，謝謝！