Sass進階篇
第一章：Sass的控制命令
[email protected]
@if 指令是一個 SassScript，它可以根據條件來處理樣式塊，如果條件為 true 返回一個樣式塊，反之 false 返回另一個樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。
假設要控制一個元素隱藏或顯示，我們就可以定義一個混合巨集，通過 @[email protected] 來判斷傳進引數的值來控制 display 的值。如下所示：
//SCSS @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); }
編譯出來的CSS:
.block {
display: block;
}
.hidden {
display: none;
}[email protected]迴圈（上）
在製作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 CSS 中你需要一個一個去書寫，但在 Sass 中，可以使用 @for 迴圈來完成。在 Sass 的 @for 迴圈中有兩種方式：
@for $i from <start> through <end> @for $i from <start> to <end>
- $i 表示變數
- start 表示起始值
- end 表示結束值
這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。
如下程式碼，先來個使用 through 關鍵字的例子：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}編譯出來的 CSS:
.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
再來個 to 關鍵字的例子：
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}編譯出來的 CSS:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}</span>第四章：Sass的顏色函式
RGB顏色函式-RGB()顏色函式
在 Sass 的官方文件中，列出了 Sass 的顏色函式清單，從大的方面主要分為 RGB , HSL 和 Opacity 三大函式，當然其還包括一些其他的顏色函式，比如說 adjust-color 和 change-color 等。在這章節中，將主要和大家一起探討 Sass 顏色函式中常見的 RGB、HSL 和 Opacity 函式。
1、RGB顏色函式
RGB 顏色只是顏色中的一種表示式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中為 RGB 顏色提供六種函式：
- rgb($red,$green,$blue)：根據紅、綠、藍三個值建立一個顏色；
- rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值建立一個顏色；
- red($color)：從一個顏色中獲取其中紅色值；
- green($color)：從一個顏色中獲取其中綠色值；
- blue($color)：從一個顏色中獲取其中藍色值；
- mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。
僅從概念上，或許大家沒有太多的概念，我們通過下面的命令來做一個簡單的測試：
sass -i在命令終端開啟這個命令，相當於開啟 Sass 的函式計算。
接下來，分別在終端使用 RGB 函式來進行計算，看其最終結果：
$ sass -i
>> rgb(200,40,88) //根據r:200,g:40,b:88計算出一個十六進位制顏色值
#c82858
>> rgba(#c82858,.65) //根據#c82858的65%透明度計算出一個rgba顏色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //從#c82858顏色值中得到紅色值 200
200
>> green(#c82858) //從#c82858顏色值中得到綠色值 40
40
>> blue(#c82858) //從#c82858顏色值中得到藍色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到一個新顏色
rgba(200, 40, 80, 0.65105)從上面的簡單運算結果可以很清晰的知道。在 RGB 顏色函式中，在實際中常用的主要是 rgba() 和 mix() 兩個函式，而 rgb() 函式只能快速的將一個 rgb 顏色轉換成十六進位制顏色表達，red()、green() 和 blue() 函式，只能取得某一顏色的一個值，對於顏色上使用並無太大作用（或許他的好處，我還沒有理解過來）。接下來，主要來實戰一下 rgba() 和 mix() 函式在實際中的運用。
4-2.RGB顏色函式-RGBA()函式
2、rgba() 函式主要用來將一個顏色根據透明度轉換成 rgba 顏色。
其語法有兩種格式：
rgba($red,$green,$blue,$alpha) //將一個rgba顏色轉譯出來，和未轉譯的值一樣
rgba($color,$alpha) //將一個Hex顏色轉換成rgba顏色
其中 rgba($color,$alpha) 函式作用更大，主要運用在這樣的情形之中：假設在實際中知道的顏色值是 #f36 或者 red，但在使用中，需要給他們配上一個透明度，這個時候在原來的 CSS 中，首先需要通過製圖工具，得到 #f36 或 red 顏色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在瀏覽器相容問題）：
//CSS
color: rgba(#f36,.5); //在css中，這是無效的寫法但在 Sass 中，RGBA() 函式就能解決這個問題。我們先來看一個簡單的例子，假設在變數中定義了一個基本的變數：
$color: #f36;
$bgColor: orange;
$borderColor:green;同時給他們加上 .5 的透明度：
//SCSS
.rgba {
color: rgba(#f36,.5);
background: rgba(orange,.5);
border-color: rgba(green,.5);
}語法：
在這個例項中，我們使用了 Sass 的 rgba 函式，在括號是函式的引數，第一個引數是需要轉換的顏色，他可以是任何顏色的表達方式，也可以是一個顏色變數；第二個引數是顏色的透明度，其值是 0~1 之間。上面的程式碼轉譯出來：
.rgba {
color: rgba(255, 51, 102, 0.5);
background: rgba(255, 165, 0, 0.5);
border-color: rgba(0, 128, 0, 0.5);
}在來看一個呼叫前面定義的變數：
//SCSS
.rgba {
color: rgba($color,.5);
background: rgba($bgColor,.5);
border-color: rgba($borderColor,.5);
}
編譯出來的 css 程式碼：
//CSS
.rgba {
color: rgba(255, 51, 102, 0.5);
background: rgba(255, 165, 0, 0.5);
border-color: rgba(0, 128, 0, 0.5);
}
我想您應該會看到一個變化，通過 rgba 函式，指定一個透明值，將原色轉換成另外一個顏色：
4-3.RGB顏色函式-Red()、Green()、Blue()函式
3、Red() 函式
red() 函式非常簡單，其主要用來獲取一個顏色當中的紅色值。假設有一個 #f36 的顏色，如果你想得到 #f36 中的 red 值是多少，這個時候使用 red() 函式就能很簡單獲取。
>> red(#f36)
255得到的值是”255”。（注意：在命令終端要先輸入sass -i 命令）
4、Green() 函式
green() 函式和 red() 函式一樣，用來獲取某一個顏色值中 green 的值。同樣拿 ”#f36“ 顏色為例：
>> green(#f36)
515、Blue() 函式
同理，blue() 函式是用來獲取某一個顏色值中 blue 的值，如：
>> blue(#f36)
102
4-4.RGB顏色函式-Mix()函式
Mix 函式是將兩種顏色根據一定的比例混合在一起，生成另一種顏色。其使用語法如下：
mix($color-1,$color-2,$weight);$color-1 和 $color-2 指的是你需要合併的顏色，顏色可以是任何表示式，也可以是顏色變數。
$weight 為 合併的比例（選擇權重），預設值為 50%，其取值範圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當然透明度也會有一定的權重。預設的比例是 50%，這意味著兩個顏色各佔一半，如果指定的比例是 25%，這意味著第一個顏色所佔比例為 25%，第二個顏色所佔比例為75%。
這就是 Mix 函式的工作原理，在函式中指定三個函式，前兩個函式是你想混合的顏色（記住，你可以通過顏色變數、十六進位制、RGBA、RGB、HSL 或者 HSLA 顏色值）。第三個引數是第一種顏色的比例值。
第五章：Sass的@規則
Sass 擴充套件了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 檔案。 所有引入的 SCSS 和 Sass 檔案都會被合併並輸出一個單一的 CSS 檔案。 另外，被匯入的檔案中所定義的變數或 mixins 都可以在主檔案中使用。
Sass 會在當前目錄下尋找其他 Sass 檔案， 如果是 Rack、Rails 或 Merb 環境中則是 Sass 檔案目錄。 也可以通過 :load_paths 選項或者在命令列中使用 --load-path 選項來指定額外的搜尋目錄。
@import 根據檔名引入。 預設情況下，它會尋找 Sass 檔案並直接引入， 但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則：
- 如果檔案的副檔名是 .css。
- 如果檔名以 http:// 開頭。
- 如果檔名是 url()。
- 如果 @import 包含了任何媒體查詢（media queries）。
如果上述情況都沒有出現，並且副檔名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 檔案就會被引入。 如果沒有副檔名， Sass 將試著找出具有 .scss 或 .sass 副檔名的同名檔案並將其引入。
例如：
@import "foo.scss";或
@import "foo";兩者都將引入 foo.scss 檔案， 而
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);將被編譯為：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);也可以通過一個 @import 引入多個檔案。例如：
@import "rounded-corners", "text-shadow";將引入 rounded-corners 和 text-shadow 兩個檔案。
如果你有一個 SCSS 或 Sass 檔案需要引入， 但是你又不希望它被編譯為一個 CSS 檔案， 這時，你就可以在檔名前面加一個下劃線，就能避免被編譯。 這將告訴 Sass 不要把它編譯成 CSS 檔案。 然後，你就可以像往常一樣引入這個檔案了，而且還可以省略掉檔名前面的下劃線。
例如，你有一個檔案叫做 _colors.scss。 這樣就不會生成 _colors.css 檔案了， 而且你還可以這樣做：
@import "colors";//不用加下劃線來引入 _colors.scss 檔案。
注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名檔案。 例如， _colors.scss 不能與 colors.scss 並存。
巢狀 @import
雖然大部分時間只需在頂層檔案使用 @import 就行了， 但是，你還可以把他們包含在 CSS 規則 和 @media 規則中。
來看官網提供的一個簡單示例：
假設要引入的樣式檔案`example.scss`檔案中包含這樣的程式碼：
.example {
color: red;
}然後這樣引用：
#main {
@import "example";
}編譯出來的 CSS：
#main .example {
color: red;
}