前言：
為了提高開發(fā)效率，前去學(xué)習(xí)sass。學(xué)完后發(fā)現(xiàn)非常簡單，官網(wǎng)上前文太多，學(xué)習(xí)起來十分不效率。因此出一片這樣文章，給那些想要把sass快速上手的人。
ps:閱讀本文章前首先需要熟悉css ? ? ? ? ?ps2：第一次寫文章可能不算太好請見諒，文章末尾有介紹編譯sass的編譯器
變量的引入
用$符號聲明變量
$color-red:red
div{color:$color-red}
編譯后：
div{color:red;}
其中$color-red==$color_red
在sass中 不區(qū)分 下劃線和中劃線
css嵌套規(guī)則
此處借用sass官網(wǎng)的代碼
原css代碼：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
利用sass嵌套可以這么寫：
#content {
????????article {
????????????h1{color:#333}
????????????P{margin-bottom:1.4em}
????????}
????aside{background-color:#EEE}
}
應(yīng)對類似:hover的偽類時，如：
#content a{color:red}
#content a:hover{color:blue}
用sass寫
#content a{
????????color:red;
????????&:hover{color:blue}
}
如果不是很清楚結(jié)構(gòu)的話，再來一個例子
sass代碼：
#content{?
? ? ?a ?{ ? color: red;
? ? ? ? ? ? ? ? &:hover{color: blue} ?
? ? ? ? ?} ? ?
????&:hover{ color: #000; }
}
編譯后的css：
#content a {color: red; }?
?#content a:hover { color: blue; }
#content:hover { color: #000; }
理解：&符號指向當(dāng)前父級選擇器，改變上文sass代碼
#content{??
??a{ color: red;?????
????body?&:hover{color: blue}?
???}?
???body &:hover{????????color: #000;????}
}
然后編譯
#content a {color: red; }
?body?#content a:hover { color: blue; }
body #content:hover { color: #000; }
群組選擇器嵌套
sass能夠減少重復(fù)的代碼量，如下運用官網(wǎng)的例子，css：
.container h1, .container h2, .container h3 { margin-bottom: .8em }
Sass：
.container{
h1,h2,h3{margin-bottom:.8em}
}
一下子減去許多負(fù)擔(dān)，有或者，sass：
nav, aside {?
???a {color: blue}??
? ? p {color: red;}
}
編譯后的css：
nav a, aside a {??color: blue; }
nav p, aside p {??color: red; }
子組合選擇器和同層組合選擇器：>、+和~
此處用官網(wǎng)的例子：
article {
??~ article { border-top: 1px dashed #ccc }
??> section?{ background: #eee }
??dl?> {
????dt?{ color: #333 }
????dd?{ color: #555 }
??}
??nav?+ & { margin-top: 0 }
}
編譯后：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
不禁讓人想到了&符號
&指向父級，然而在 >+~選擇器的前面加上&并不影響使用，但是面對偽類選擇器&符號必須有，至于為什么，可以自己去嘗試在偽類 : 符號連接的代碼隨便哪一邊多出一個space，試試效果就明白了
嵌套屬性
利用官網(wǎng)的例子
Sass：
nav {
??border: {
??style: solid;
??width: 1px;
??color: #ccc;
??}
}
編譯后的Css：
nav {
??border-style: solid;
??border-width: 1px;
??border-color: #ccc;
}
例子二：
Sass：
nav {
??????border: 1px solid #ccc {
??????????left: 0px;
??????????right: 0px;
??}
}
編譯后的css：
nav {
??border: 1px solid #ccc;
??border-left: 0px;
??border-right: 0px;
}
導(dǎo)入sass文件
@import “sidebar”??
可以省去默認(rèn)的sass和scss的文件后綴
如果要導(dǎo)入原生css，請將css的后綴改為scss
默認(rèn)變量值
$font-size-lg:40px !default;
如果$font-size-lg變量值沒有重新聲明，就使用默認(rèn)值40px
混合器（個人理解為可移動復(fù)制的代碼塊）
使用@mixin做標(biāo)識，并用@include引用，官方例子如下，sass：
@mixin rounded-corners {
? -moz-border-radius: 5px;
? -webkit-border-radius: 5px;
? border-radius: 5px;
}
notice {
? background-color: green;
? border: 2px solid #00aa00;
? @include rounded-corners;
}
編譯成css：
.notice {
? background-color: green;
? border: 2px solid #00aa00;
? -moz-border-radius: 5px;
? -webkit-border-radius: 5px;
? border-radius: 5px;
}
當(dāng)然混合器中還能使用css，如：
@mixin no-bullets {
? list-style: none;
? li {
? ? list-style-image: none;
? ? list-style-type: none;
? ? margin-left: 0px;
? }
}
使用時注意父級選擇器
給混合器傳參
@mixin tag-color($a-color,$b-color:$a-color,$c-color:$a-color){
color:$a-color;
background-color:$b-color;
border-color:$c-color;
}
div{
@include tag-color(red);或者@include tag-color(red,blue,yellow);
}
編譯后的css：
div {
color:red;
background-color:red;
border-color:red; }
選擇器繼承就不講解了，不是那么容易理解的，需要的請去官網(wǎng)第六節(jié)查看https://www.sass.hk/guide/
最后介紹一下編輯器，在做好sass環(huán)境設(shè)置的前提下
第一種：可以使用webstorm，這里貼上如何設(shè)置的帖子
第二種：使用webpack，添加sass環(huán)境，最后打包編譯（webpack很好用，但是學(xué)習(xí)起來有一定的難度這里就不做詳細(xì)介紹）
第三種
