管網(wǎng)寫了很多笋额，但我這就把最主要的幾點(diǎn)記錄下來
1、sass/scss 對比css的優(yōu)勢：
css有一個特別不常用的特性，即@import規(guī)則悼院，它允許在一個css文件中導(dǎo)入其他css文件轨域。然而袱耽，后果是只有執(zhí)行到@import時，瀏覽器才會去下載其他css文件干发，這導(dǎo)致頁面加載起來特別慢朱巨。
sass也有一個@import規(guī)則，但不同的是枉长，sass的@import規(guī)則在生成css文件時就把相關(guān)文件導(dǎo)入進(jìn)來冀续。這意味著所有相關(guān)的樣式被歸納到了同一個css文件中琼讽，而無需發(fā)起額外的下載請求。另外沥阳，所有在被導(dǎo)入文件中定義的變量和混合器（參見2.5節(jié)）均可在導(dǎo)入文件中使用跨琳。
使用sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名。你可以省略.sass或.scss文件后綴（見下圖）桐罕。這樣脉让，在不修改樣式表的前提下，你完全可以隨意修改你或別人寫的被導(dǎo)入的sass樣式文件語法功炮，在sass和scss語法之間隨意切換溅潜。舉例來說，@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當(dāng)前樣式表中薪伏。
2滚澜、混合器（其實(shí)就是屬性代碼塊，相當(dāng)于implements）
@mixin 和 @include
如果你的整個網(wǎng)站中有幾處小小的樣式類似（例如一致的顏色和字體）嫁怀，那么使用變量來統(tǒng)一處理這種情況是非常不錯的選擇设捐。但是當(dāng)你的樣式變得越來越復(fù)雜，你需要大段大段的重用樣式的代碼塘淑，獨(dú)立的變量就沒辦法應(yīng)付這種情況了萝招。你可以通過sass的混合器實(shí)現(xiàn)大段樣式的重用。
混合器使用@mixin標(biāo)識符定義存捺』闭樱看上去很像其他的CSS @標(biāo)識符，比如說@media或者@font-face捌治。這個標(biāo)識符給一大段樣式賦予一個名字岗钩，這樣你就可以輕易地通過引用這個名字重用這段樣式。下邊的這段sass代碼肖油，定義了一個非常簡單的混合器兼吓，目的是添加跨瀏覽器的圓角邊框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
然后就可以在你的樣式表中通過@include來使用這個混合器森枪，放在你希望的任何地方视搏。@include調(diào)用會把混合器中的所有樣式提取出來放在@include被調(diào)用的地方。如果像下邊這樣寫：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最終生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
3疲恢、使用選擇器繼承來精簡CSS（相當(dāng)于extends）
@extend
使用sass的時候凶朗，最后一個減少重復(fù)的主要特性就是選擇器繼承瓷胧∠匀基于Nicole Sullivan面向?qū)ο蟮腸ss的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式搓萧。這個通過@extend語法實(shí)現(xiàn)杂数，如下代碼:
//通過選擇器繼承繼承樣式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
在上邊的代碼中宛畦，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"揍移。相關(guān)元素不僅會擁有一個3px寬的邊框次和，而且這個邊框?qū)⒆兂杉t色的，這個元素同時還會有一個淺紅色的背景那伐，因?yàn)檫@些都是在.error里邊定義的樣式踏施。
.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承罕邀，如下代碼:
//.seriousError從.error繼承樣式
.error a{ //應(yīng)用到.seriousError a
color: red;
font-weight: 100;
}
h1.error { //應(yīng)用到hl.seriousError
font-size: 1.2rem;
}
