1 使用變量

$nav-color: #F90; nav {$width: 100px;width: $width;color: $nav-color; }//編譯后nav {width: 100px;color: #F90; }

1-2 變量引用

$highlight-color: #F90; .selected {border: 1px solid $highlight-color; }//編譯后.selected {border: 1px solid #F90; } $highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected {border: $highlight-border; }//編譯后.selected {border: 1px solid #F90; }

1-3 變量名中劃線和下劃線的使用

取決于個(gè)人喜好

2 嵌套CSS規(guī)則

如： #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 } }

?

2-1 hover

錯(cuò)誤寫法： article a {color: blue;:hover { color: red } }正確寫法： article a {color: blue;&:hover { color: red } }

2-2 群組選擇器的嵌套

如： .container h1, .container h2, .container h3 { margin-bottom: .8em }處理方式為： .container {h1, h2, h3 {margin-bottom: .8em} }又如： nav, aside {a {color: blue} }

2-3 子組合選擇器和同層選擇器：> + ~

如： 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 }處理方式為： article {~ article { border-top: 1px dashed #ccc }> section { background: #eee }dl > {dt { color: #333 }dd { color: #555 }}nav + & { margin-top: 0 } }

2-4 嵌套屬性

如： nav {border-style: solid;border-width: 1px;border-color: #ccc; } 處理為： nav {border: {style: solid;width: 1px;color: #ccc;} }又如： nav {border: 1px solid #ccc;border-left: 0px;border-right: 0px; } 處理為： nav {border: 1px solid #ccc {left: 0px;right: 0px; } }

3 導(dǎo)入SASS文件

css有一個(gè)特別不常用的特性，即@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而，后果是只有執(zhí)行到@import時(shí)，瀏覽器才會(huì)去下載其他css文件，這導(dǎo)致頁面加載起來特別慢。

sass也有一個(gè)@import規(guī)則，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無需發(fā)起額外的下載請(qǐng)求。另外，所有在被導(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)前樣式表中。

?

3-1 使用SASS部分文件

當(dāng)通過@import把sass樣式分散到多個(gè)文件時(shí)，你通常只想生成少數(shù)幾個(gè)css文件。那些專門為@import命令而編寫的sass文件，并不需要生成對(duì)應(yīng)的獨(dú)立css文件，這樣的sass文件稱為局部文件。對(duì)此，sass有一個(gè)特殊的約定來命名這些文件。

此約定即，sass局部文件的文件名以下劃線開頭。這樣，sass就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css，而只把這個(gè)文件用作導(dǎo)入。當(dāng)你@import一個(gè)局部文件時(shí)，還可以不寫文件的全名，即省略文件名開頭的下劃線。舉例來說，你想導(dǎo)入themes/_night-sky.scss這個(gè)局部文件里的變量，你只需在樣式表中寫@import?"themes/night-sky";。

局部文件可以被多個(gè)不同的文件引用。當(dāng)一些樣式需要在多個(gè)頁面甚至多個(gè)項(xiàng)目中使用時(shí)，這非常有用。在這種情況下，有時(shí)需要在你的樣式表中對(duì)導(dǎo)入的樣式稍作修改，sass有一個(gè)功能剛好可以解決這個(gè)問題，即默認(rèn)變量值。

3-2 默認(rèn)變量值

一般，重復(fù)聲明變量會(huì)被覆蓋，如： $link-color: blue; $link-color: red; a { color: $link-color; }特別是你的sass文件庫在他人import時(shí)，他人可能想修改某些值的情況下，sass提供類似！import標(biāo)簽的對(duì)立面，即：如果這個(gè)變量被重新聲明賦值了，那就用它的聲明的值，否則就用這個(gè)默認(rèn)值。 處理為： $fancybox-width: 400px !default; .fancybox { width: $fancybox-width; } 在上例中，如果用戶在導(dǎo)入你的sass局部文件之前聲明了一個(gè)$fancybox-width變量，那么你的局部文件中對(duì)$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明，則$fancybox-width將默認(rèn)為400px。

3-3 嵌套導(dǎo)入

如，一個(gè)名為_blue-theme.scss的局部文件，內(nèi)容如下： aside {background: blue;color: white; } 然后把它導(dǎo)入到一個(gè)CSS規(guī)則內(nèi)，如下所示： .blue-theme {@import "blue-theme"}//生成的結(jié)果跟你直接在.blue-theme選擇器內(nèi)寫_blue-theme.scss文件的內(nèi)容完全一樣。.blue-theme {aside {background: blue;color: #fff;} } 被導(dǎo)入的局部文件中定義的所有變量和混合器，也會(huì)在這個(gè)規(guī)則范圍內(nèi)生效。 好處：這些變量和混合器不會(huì)全局有效，這樣我們就可以通過嵌套導(dǎo)入只對(duì)站點(diǎn)中某一特定區(qū)域運(yùn)用某種顏色主題或其他通過變量配置的樣式。

3-4 原生CSS導(dǎo)入

由于sass兼容原生的css，所以它也支持原生的CSS@import。盡管通常在sass中使用@import時(shí)，sass會(huì)嘗試找到對(duì)應(yīng)的sass文件并導(dǎo)入進(jìn)來，但在下列三種情況下會(huì)生成原生的CSS@import，盡管這會(huì)造成瀏覽器解析css時(shí)的額外下載：

• 被導(dǎo)入文件的名字以.css結(jié)尾；
• 被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應(yīng)服務(wù)；
• 被導(dǎo)入文件的名字是CSS的url()值。

這就是說，你不能用sass的@import直接導(dǎo)入一個(gè)原始的css文件，因?yàn)閟ass會(huì)認(rèn)為你想用css原生的@import。但是，因?yàn)閟ass的語法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。

文件導(dǎo)入是保證sass的代碼可維護(hù)性和可讀性的重要一環(huán)。次之但亦非常重要的就是注釋了。注釋可以幫助樣式作者記錄寫sass的過程中的想法。在原生的css中，注釋對(duì)于其他人是直接可見的，但sass提供了一種方式可在生成的css文件中按需抹掉相應(yīng)的注釋。

4 靜默注釋

body {color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */ }body {color /* 這塊注釋內(nèi)容不會(huì)出現(xiàn)在生成的css中 */: #333;padding: 1; /* 這塊注釋內(nèi)容也不會(huì)出現(xiàn)在生成的css中 */ 0; }

5 混合器

混合器使用@mixin標(biāo)識(shí)符定義。先寫一個(gè)混合器： @mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }通過@include來使用這個(gè)混合器 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; }

5-1 何時(shí)使用混合器

利用混合器，可以很容易地在樣式表的不同地方共享樣式。如果你發(fā)現(xiàn)自己在不停地重復(fù)一段樣式，那就應(yīng)該把這段樣式構(gòu)造成優(yōu)良的混合器，尤其是這段樣式本身就是一個(gè)邏輯單元，比如說是一組放在一起有意義的屬性。

判斷一組屬性是否應(yīng)該組合成一個(gè)混合器，一條經(jīng)驗(yàn)法則就是你能否為這個(gè)混合器想出一個(gè)好的名字。如果你能找到一個(gè)很好的短名字來描述這些屬性修飾的樣式，比如rounded-cornersfancy-font或者no-bullets，那么往往能夠構(gòu)造一個(gè)合適的混合器。如果你找不到，這時(shí)候構(gòu)造一個(gè)混合器可能并不合適。

混合器在某些方面跟css類很像。都是讓你給一大段樣式命名，所以在選擇使用哪個(gè)的時(shí)候可能會(huì)產(chǎn)生疑惑。最重要的區(qū)別就是類名是在html文件中應(yīng)用的，而混合器是在樣式表中應(yīng)用的。這就意味著類名具有語義化含義，而不僅僅是一種展示性的描述：用來描述html元素的含義而不是html元素的外觀。而另一方面，混合器是展示性的描述，用來描述一條css規(guī)則應(yīng)用之后會(huì)產(chǎn)生怎樣的效果。

在之前的例子中，.notice是一個(gè)有語義的類名。如果一個(gè)html元素有一個(gè)notice的類名，就表明了這個(gè)html元素的用途：向用戶展示提醒信息。rounded-corners混合器是展示性的，它描述了包含它的css規(guī)則最終的視覺樣式，尤其是邊框角的視覺樣式。混合器和類配合使用寫出整潔的html和css，因?yàn)槭褂谜Z義化的類名亦可以幫你避免重復(fù)使用混合器。為了保持你的html和css的易讀性和可維護(hù)性，在寫樣式的過程中一定要銘記二者的區(qū)別。

有時(shí)候僅僅把屬性放在混合器中還遠(yuǎn)遠(yuǎn)不夠，可喜的是，sass同樣允許你把css規(guī)則放在混合器中。

5-2 混合器中的CSS規(guī)則

如下一個(gè)包含css規(guī)則的名為no-bullets的混合器： @mixin no-bullets {list-style: none;li {list-style-image: none;list-style-type: none;margin-left: 0px;} }使用： ul.plain {color: #444;@include no-bullets; }等價(jià)于： ul.plain {color: #444;list-style: none; } ul.plain li {list-style-image: none;list-style-type: none;margin-left: 0px; }

5-3 給混合器傳參

// 如： @mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; } }// 使用： a {@include link-colors(blue, red, green); }// Sass最終生成的是：a { color: blue; } a:hover { color: red; } a:visited { color: green; }

當(dāng)你@include混合器時(shí)，有時(shí)候可能會(huì)很難區(qū)分每個(gè)參數(shù)是什么意思，參數(shù)之間是一個(gè)什么樣的順序。為了解決這個(gè)問題，sass允許通過語法$name: value的形式指定每個(gè)參數(shù)的值。這種形式的傳參，參數(shù)順序就不必再在乎了，只需要保證沒有漏掉參數(shù)即可：

a {@include link-colors($normal: blue,$visited: green,$hover: red); }

5-4 默認(rèn)參數(shù)值

為了在@include混合器時(shí)不必傳入所有的參數(shù)，我們可以給參數(shù)指定一個(gè)默認(rèn)值。參數(shù)默認(rèn)值使用$name: default-value的聲明形式，默認(rèn)值可以是任何有效的css屬性值，甚至是其他參數(shù)的引用，如下代碼：

@mixin link-colors($normal,$hover: $normal,$visited: $normal) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; } }

如果像下邊這樣調(diào)用：@include link-colors(red)?$hover和$visited也會(huì)被自動(dòng)賦值為red。

6 使用選擇器繼承來精簡CSS

選擇器繼承是說一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過@extend語法實(shí)現(xiàn)，如下代碼:

//通過選擇器繼承繼承樣式 .error {border: 1px solid red;background-color: #fdd; } .seriousError {@extend .error;border-width: 3px; }

.seriousError不僅會(huì)繼承.error自身的所有樣式，任何跟.error有關(guān)的組合選擇器樣式也會(huì)被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式 .error a{ //應(yīng)用到.seriousError acolor: red;font-weight: 100; } h1.error { //應(yīng)用到hl.seriousErrorfont-size: 1.2rem; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/liuminxia/p/9341429.html

總結(jié)

以上是生活随笔為你收集整理的Sass学习笔记（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。