Sass（英文全稱：Syntactically Awesome Stylesheets）
Sass是一個最初由Hampton Catlin設(shè)計并由Natalie Weizenbaum開發(fā)的層疊樣式表語言。
Sass的官方解釋器是開源的并且用Ruby語言寫成，但是也有用PHP、C語言、Java等實現(xiàn)的版本（C語言版本叫l(wèi)libSass，Java語言版本的叫做JSass）。
SassScript提供了以下功能：變量、嵌套、混入（Mixin）、選擇器繼承等。
發(fā)行時間： 2007年
穩(wěn)定版本： 2016年3月28日
淵源：為什么一會兒SASS，一會兒SCSS？
Sass十分簡潔，語法中幾乎不使用括號。
body
background-color red
body p
font-size 10px
上面這個語言的后綴是.sass
后來前端工程師表表示不含括號看不懂，于是Sass的開發(fā)者又提供了Scss，含括號，升級后的后綴是.scss。
加完括號的這個語言感覺跟CSS沒啥區(qū)別了，但是有很多新的寫法，比如選擇器可以放到里面去
body{
color: red;
p{
font-size: 10px;
}
}
有關(guān)SASS的來源：
- Ruby是一門比較不錯的語言，它有一個框架叫Rails，這個框架是一個全棧web框架
- 用Ruby的人發(fā)現(xiàn)傳統(tǒng)的CSS，HTML和JS非常不好用，于是就對應(yīng)的發(fā)明和創(chuàng)造了SCSS，HAML和CoffeeScript（CoffeeScript現(xiàn)在幾乎不用）。
- Sass這門語言是在Nodejs之前產(chǎn)生的，這些靈感都是很好的，后來在node中，對應(yīng)的出現(xiàn)了node-sass，Jade/Pug， TypeScript/ES6。
-
我們現(xiàn)在常使用的就是node-sass
DB9C01B7B61440A1AB5190FD20729DBA.png
SASS的使用
本節(jié)案例使用的操作工具是parcel。這個工具可以將html中引用的sass文件轉(zhuǎn)成一般的css，并創(chuàng)建一個服務(wù)器，展示在本地網(wǎng)站中。
本節(jié)中使用到的代碼如下：
cd scss-1
npm init -y
npm i -D parcel
npx parcel index.html：在運行這一句的時候，回自行安裝node-sass
1. 嵌套選擇器
傳統(tǒng)CSS這樣，多個嵌套的內(nèi)容需要分開寫，但是SCSS中，可以嵌套寫，這樣就不用每次重復(fù)寫選擇器了
/* CSS */
.nav {
border: 1px solid grey;
}
.nav > ul {
background: white;
}
.nav > ul > li {
border: 1px solid red;
}
/* SASS */
.nav {
border: 1px solid grey;
ul {
background: white;
li {
border: 1px solid red;
}
}
}
2. 變量
SASS是可以定義變量的，變量前面加gray: $grey;引用變量的一個好處是，當想統(tǒng)一更改的時候很方便。
最終在編譯的時候，會將所有變量變成真實的值。
$grey: #666;
.nav {
border: 1px solid $grey;
ul {
background: white;
li {
border: 1px solid red;
}
}
}
3. mixin
當我們想調(diào)試的時候，往往需要將一段代碼拿出來，單獨當一個地方。使用mixin可以做到。前面用@mixin進行聲明，后面用@include進行復(fù)制引用。
/* sass */
@mixin debug{
border: 1px solid red;
}
.nav{
@include debug;
}
/* css */
.nav{
border: 1px solid red;
}
mixin可以是一個函數(shù)，接收參數(shù)，這個參數(shù)可以有默認值@mixin debug($border-color: green){border: 1px solid $border-color;}
@mixin debug($border-color){
border: 1px solid $border-color;
}
@mixin debug($border-color: green){
border: 1px solid $border-color;
}
.nav {
@include debug(red);
ul {
background: white;
li {
@include debug(green);
}
}
}
@include在被編譯的時候，是將代碼拷貝過來
4. placeholder
適用于樣式復(fù)用，比如一段好用的樣式，想復(fù)用的時候，我們可以像上面這樣使用@mixin。但是代碼在編譯的時候并沒有減少，只是寫的時候減少了，所有使用@include的地方，都將會復(fù)制那份代碼。
@include只是機械的將代碼拷貝過來。
我們使用placeholder就好，將mixin改成%，將include改成extend就好。這樣編譯出來的代碼就是將樣式寫了一次，但是將選擇器放在了前面。
%debug{
box-shadow: 0 0 3px black;
margin: 10px;
background: white;
border-radius: 4px;
}
.nav {
ul {
background: white;
li {
@extend %box;
}
}
}
.demo {
@extend %box;
}
轉(zhuǎn)成的CSS樣式就是
.nav > ul > li .demo {
box-shadow: 0 0 3px black;
margin: 10px;
background: white;
border-radius: 4px;
}
總結(jié)
- SASS最大的好處是能讓你寫JS那樣去寫CSS，讓CSS更有邏輯性，更方便去控制
- mixin主要用于函數(shù)式樣式，placeholder主要用于樣式復(fù)用。
