在這個問題上我還挺想趁此機(jī)會開個專欄敞葛。不過最新時間緊誉察，就簡要的寫寫吧。
首先我想明確一件事惹谐，那就是怎么去學(xué)好一項(xiàng)技能/一門語言/一種語法持偏。我不反對熟能生巧，但是我更不贊成無腦羅列知識豺鼻。
一综液、Scss是什么，為什么會出現(xiàn)Scss儒飒，Scss的出現(xiàn)給前端帶來了什么谬莹，我們有多少必要去學(xué)習(xí)Scss
如果不搞懂上述的問題，知識難免成為機(jī)械的重復(fù)。
作為擁有一年半實(shí)際前端開發(fā)經(jīng)驗(yàn)的小羊同學(xué)附帽，使用的技術(shù)棧主要集中在jq和原生埠戳，vue用的就不多。對于css這塊更是使用的很原始蕉扮，幾乎就是靜態(tài)的層疊樣式表整胃，連@media都很少用，更不用提什么動畫效果喳钟。
不過也正因如此屁使，我個人寫過很多類似于
ul li{}
ul li a{}
ul li .b{}
的代碼，大量重復(fù)冗余的代碼自然是程序員最討厭的奔则，但是作為前端蛮寂，js都這幅德性了，還能指望css嗎易茬？
我個人認(rèn)為css有三個最大的缺點(diǎn)：
一酬蹋、css并不存在邏輯。這點(diǎn)是我認(rèn)為css最欠缺的地方抽莱，不過目前貌似并沒有任何一個工具能解決這個問題范抓，css的動態(tài)調(diào)整依然時js在做。
二：css自身無合適的變量機(jī)制食铐，雖然有--varible的語法匕垫，但是原生css的變量機(jī)制很難用。
三：css無法嵌套虐呻，導(dǎo)致css的可讀性并不高年缎，大部分時候就是只有寫代碼的人看看css，接手的人很容易一臉懵铃慷。
Scss解決了二和三，也就是變量的問題和嵌套的問題蜕该。（除非從底層改變css犁柜，否則問題一幾乎無法單純通過css完成）。Scss給前端帶來的是更便于管理的css邏輯結(jié)構(gòu)堂淡，更精簡的css代碼馋缅，以及更加優(yōu)雅的語法。至于學(xué)習(xí)scss的理由~ 如果能躺著就有錢賺我連工作都不會去做绢淀。
二萤悴、Scss是如何解決上述問題的
變量問題：變量的問題非常簡單，原生的css就支持皆的，所以scss在此基礎(chǔ)上只算是做了不大不小的推進(jìn)覆履。
Scss的變量聲明
sass的變量頭部使用$作為標(biāo)識符。Scss中存在作用域的概念，所以如果一個變量要是在{}內(nèi)部定義的硝全，就不要想在外面使用了栖雾，在內(nèi)部倒是沒問題
$width:20px; //定義變量$width
//使用：
width:$width;
// 編譯后：
width:20px;
div{
$width:200px;
width:$width; //正確
}
ul{
width:$width; //錯誤
}
默認(rèn)變量的使用
!default和!import正好相反。如果外面有定義fancybox-width被替換為外面定義的析藕。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
中劃線和下劃線混用
sass的中劃線和下劃線等效
$a-b:10px;
// 你甚至可以這么引用
width:$a_b;
個人認(rèn)為這個語法極其弱智。但是如果碰見另外一個人真的用了這個特性凳厢，自己又不知道的情況下账胧，可以想象到時候會有何等的臥槽！
嵌套css的解決先紫。Scss的嵌套問題解決的還是不錯的治泥，不過對于嵌套屬性這條我是堅(jiān)決反對，反而像是偷雞不成蝕把米泡孩。
嵌套css規(guī)則
.container{
ul{
li {}
}
p{}
div{}
}
你甚至可以這么干
#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}
嵌套屬性（為了應(yīng)付這條還是看一看车摄，這條明顯就是為了優(yōu)化而優(yōu)化，喪失了可讀性仑鸥，還不如等價于后的代碼優(yōu)雅）
nav{
border{
style:solid;
width:1px;
color:white;
}
}
//等價于
nav{
border-style:solid;
border-width: 1px;
border-color:white;
}
父選擇器的標(biāo)識符&吮播。傳送門。
混合器
@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;
}
三眼俊、雜七雜八
1意狠、Scss文件中引入Scss文件
有兩個文件a.scss和b.scss。只需要在a.scss文件內(nèi)部使用語法
@import b疮胖，注意此處沒有.scss后綴环戈。具體原因傳送門。不過我個人認(rèn)為這個原因聊勝于無澎灸，還不如統(tǒng)一都要后綴院塞。
！Ｐ哉选拦止！注意如果你要在scss文件中引入css文件，必須加上后綴糜颠。
如果我在文件a中引入了b汹族，在生成css的時候會生成兩個文件a.css和b.css，a.css中包含所有b.css中的樣式其兴。
如果我想只輸出a..css顶瞒，而且b.scss單純的作為給a.scss服務(wù)。此時只需要將b.scss重命名為_b.scss元旬，在a.scss中@import b榴徐，的確是b而非_b守问，這樣做的話_b.scss就不會輸出為b.css。類似于包的概念箕速。
嵌套導(dǎo)入傳送門酪碘，個人很討厭的語法
