一、SCSS簡介
??Sass是成熟炉旷、穩(wěn)定签孔、強大的CSS預處理器，而SCSS是Sass3版本當中引入的新語法特性窘行，完全兼容CSS3的同時繼承了Sass強大的動態(tài)功能饥追。
??CSS書寫代碼規(guī)模較大的Web應用時，容易造成選擇器罐盔、層疊的復雜度過高但绕，因此推薦通過SASS預處理器進行CSS的開發(fā)，SASS提供的變量惶看、嵌套捏顺、混合、繼承等特性纬黎，讓CSS的書寫更加有趣與程式化幅骄。
??Sass 有兩種語法。 第一種被稱為 SCSS (Sassy CSS)本今，是一個 CSS3 語法的擴充版本拆座，這份參考資料使用的就是此語法主巍。 也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件挪凑。 另外孕索，SCSS 理解大多數(shù) CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter 語法躏碳。 這種語種語法的樣式表文件需要以 .scss 擴展名搞旭。
??第二種比較老的語法成為縮排語法（或者就稱為 "Sass"）， 提供了一種更簡潔的 CSS 書寫方式菇绵。 它不使用花括號肄渗，而是通過縮排的方式來表達選擇符的嵌套層級，I 而且也不使用分號脸甘，而是用換行符來分隔屬性恳啥。 很多人認為這種格式比 SCSS 更容易閱讀，書寫也更快速丹诀。 縮排語法具有 Sass 的所有特色功能钝的， 雖然有些語法上稍有差異； 這些差異在{file:INDENTED_SYNTAX.md 所排語法參考手冊}中都有描述铆遭。 使用此種語法的樣式表文件需要以 .sass 作為擴展名硝桩。
??任一語法都可以導入另一種語法撰寫的文件中。 只要使用 sass-convert 命令行工具枚荣，就可以將一種語法轉換為另一種語法：
# 將 Sass 轉換為 SCSS
$ sass-convert style.sass style.scss
# 將 SCSS 轉換為 Sass
$ sass-convert style.scss style.sass
安裝：sass
npm install node-sass --save-dev
npm install sass-loader --save-dev
# 加載資源文件
npm install sass-resources-loader --save-dev
在build文件夾下的webpack.base.conf.js的module中的rules里面添加配置：
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
在webpack中碗脊，所有預處理器都要匹配相應的loader,vue-loader允許其他的webpack-loader處理組件中的一部分嗎，然后它根據(jù)lang屬性自動判斷出要使用的loaders橄妆。所以衙伶，其實只要安裝處理sass/scss的loader。就能在vue中使用scss了害碾。
使用scss時候在所在的style樣式標簽上添加lang=”scss”即可應用對應的語法矢劲，否則報錯:
scss使用測試：如下測試修改字體顏色:
<style lang="scss">
$color:red;
div {color:$color;}
</style>
build/utils.js
全局引入：
scss: generateLoaders('sass')
修改為：
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/scss/global.scss') // 需要全局引入的文件
}
}),
二、變量
變量用來存儲需要在CSS中復用的信息慌随，例如顏色和字體芬沉。SASS通過$符號去聲明一個變量。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
上面例子中變量primary-color的值將會替換所有引用他們的位置阁猜。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
二丸逸、嵌套
SASS允許開發(fā)人員以嵌套的方式使用CSS，但是過度的使用嵌套會讓產(chǎn)生的CSS難以維護剃袍，因此是一種不好的實踐黄刚，下面的例子表達了一個典型的網(wǎng)站導航樣式：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
代碼中的ul、li民效、a選擇器都被嵌套在nav選擇器當中使用憔维，這是一種書寫更高可讀性CSS的良好方式侍芝，編譯后產(chǎn)生的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;
}
三、引入
SASS能夠?qū)⒋a分割為多個片段埋同，并以underscore風格的下劃線作為其命名前綴（_partial.scss），SASS會通過這些下劃線來辨別哪些文件是SASS片段棵红，并且不讓片段內(nèi)容直接生成為CSS文件凶赁，從而只是在使用@import指令的位置被導入。CSS原生的@import會通過額外的HTTP請求獲取引入的樣式片段逆甜，而SASS的@import則會直接將這些引入的片段合并至當前CSS文件虱肄，并且不會產(chǎn)生新的HTTP請求。下面例子中的代碼交煞，將會在base.scss文件當中引入_reset.scss片斷咏窿。
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
SASS中引入片斷時，可以缺省使用文件擴展名素征，因此上面代碼中直接通過@import 'reset'引入集嵌，編譯后生成的代碼如下：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
四、混合
混合（Mixin）用來分組那些需要在頁面中復用的CSS聲明御毅，開發(fā)人員可以通過向Mixin傳遞變量參數(shù)來讓代碼更加靈活根欧，該特性在添加瀏覽器兼容性前綴的時候非常有用，SASS目前使用@mixin name指令來進行混合操作端蛆。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
代碼建立了一個名為border-radius的Mixin凤粗，并傳遞了一個變量$radius作為參數(shù)，然后在后續(xù)代碼中通過@include border-radius(10px)使用該Mixin今豆，最終編譯的結果如下：
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
