CSS預編譯器：Sass（進階）,更快的前端開發

1.@if

---

 

 

@if 指令是一個 SassScript，它可以根據條件來處理樣式塊，如果條件為 true 返回一個樣式塊，反之 false 返回另一個樣式塊

在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。 假設要控制一個元素隱藏或顯示，我們就可以定義一個混合宏，通過 @if...@else... 來判斷傳進參數的值來控制 display 的值

 

2.@for循環

---

 

 

在制作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 CSS 中你需要一個一個去書寫，但在 Sass 中，可以使用 @for 循環來完成。在 Sass 的 @for 循環中有兩種方式：

 

 

 

 

 

 

 

 

3.@while循環

---

 

 

這個和 @for 指令很相似，只要 @while 后面的條件為 true 就會執行

 

 

 

4.Sass的函數簡介

---

 

 

在 Sass 中除了可以定義變量，具有 @extend、%placeholder 和 mixins 等特性之外，還自備了一系列的函數功能。其主要包括：

 

- 字符串函數

- 數字函數

- 列表函數

- 顏色函數

- Introspection 函數

- 三元函數等

 

當然除了自備的函數功能之外，我們還可以根據自己的需求定義函數功能，常常稱之為 自定義函數。

     

     4.1字符串函數-unquote()函數

 

處理字符串的函數

-       unquote($string)：刪除字符串中的引號；

-       quote($string)：給字符串添加引號。

 

.test1 {

    content:  unquote('Hello Sass!') ;

}

 

.test3 {

    content: unquote("I'm Web Designer");

}

 

     4.2字符串函數-quote()函數

 

quote() 函數剛好與 unquote() 函數功能相反，主要用來給字符串添加引號。如果字符串，自身帶有引號會統一換成雙引號 ""。如：

.test1 {

    content:  quote('Hello Sass!');

}

 

     4.3字符串函數-To-upper-case()、To-lower-case()

 

To-upper-case() 函數將字符串小寫字母轉換成大寫字母。如：

 

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);

}

 

To-lower-case() 函數 與 To-upper-case() 剛好相反，將字符串轉換成小寫字母：

 

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

 

編譯出來的 css 代碼：

 

//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

     

     4.4數字函數簡介

 

-       percentage($value)：將一個不帶單位的數轉換成百分比值；

-       round($value)：將數值四舍五入，轉換成一個最接近的整數；

-       ceil($value)：將大於自己的小數轉換成下一位整數；

-       floor($value)：將一個數去除他的小數部分；

-       abs($value)：返回一個數的絕對值；

-       min($numbers…)：找出幾個數值之間的最小值；

-       max($numbers…)：找出幾個數值之間的最大值；

-       random(): 獲取隨機數

     

 

percentage()函數主要是將一個不帶單位的數字轉換成百分比形式：（不能帶單位）

 

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>

 

.footer{
    width : percentage(.2)
}

 

編譯后的 css 代碼：

 

.footer{
    width : 20%

}

 

round() 函數可以將一個數四舍五入為一個最接近的整數：

.footer {
  width:round(12.3px)
}

 

編譯后的 css 代碼：

 

.footer {
  width: 12px;

}

 

floor() 函數剛好與 ceil() 函數功能相反，其主要將一個數去除其小數部分，並且不做任何的進位。也就是只做舍，

.footer {
  width:floor(12.3px);
}

 

編譯后的 css 代碼：

 

.footer {
  width: 12px;

}

 

 

abs( ) 函數會返回一個數的絕對值。

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)

0.5

 

min() 函數功能主要是在多個數之中找到最小的一個，這個函數可以設置任意多個參數：(單位相同 )

>> min(1,2,1%,3,300%)
1%

 

max() 函數和 min() 函數一樣，不同的是，max() 函數用來獲取一系列數中的最大那個值：

 

>> max(1,5)
5
>> max(1px,5px)

5px

 

random() 函數是用來獲取一個隨機數：

 

>> random()
0.03886
>> random()

0.66527

 

5.列表函數簡介

---

 

列表函數主要包括一些對列表參數的函數使用，主要包括以下幾種：

 

-       length($list)：返回一個列表的長度值；

-       nth($list, $n)：返回一個列表中指定的某個標簽值

-       join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表；

-       append($list1, $val, [$separator])：將某個值放在列表的最后；

-       zip($lists…)：將幾個列表結合成一個多維的列表；

-       index($list, $value)：返回一個值在列表中的位置值。

     

length() 函數主要用來返回一個列表中有幾個值，簡單點說就是返回列表清單中有多少個值：

 

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4

 

語法:nth($list,$n)

 

nth() 函數用來指定列表中某個位置的值。不過在 Sass 中，nth() 函數和其他語言不同，1 是指列表中的第一個標簽值，2 是指列給中的第二個標簽值，依此類推。如：

 

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)

(1px "solid" #ff0000)

 

join() 函數是將兩個列表連接合並成一個列表。（不能多個）

 

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
>> join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

 

在 join() 函數中還有一個很特別的參數 $separator，這個參數主要是用來給列表函數連接列表值是，使用的分隔符號，默認值為 auto。

 

join() 函數中 $separator 除了默認值 auto 之外，還有 comma 和 space 兩個值，其中 comma 值指定列表中的列表項值之間使用逗號（,）分隔，space 值指定列表中的列表項值之間使用空格（ ）分隔。

join(blue,(red orange),space)

建議都加上這個參數

 

append() 函數是用來將某個值插入到列表中，並且處於最末位。

append((blue, green),red,space)

 

>> append(10px 20px ,30px)
(10px 20px 30px)
>> append((10px,20px),30px)

(10px, 20px, 30px)

 

zip()函數將多個列表值轉成一個多維的列表：

 

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

 

在使用zip()函數時，每個單一的 列表個數值必須是相同的：

 

index() 函數類似於索引一樣，主要讓你找到某個值在列表中所處的位置。在 Sass 中，第一個值就是1，第二個值就是 2，依此類推：

 

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

 

在 index() 函數中，如果指定的值不在列表中（沒有找到相應的值），那么返回的值將是 false，相反就會返回對應的值在列表中所處的位置。

 

6.Introspection函數

---

 

Introspection 函數包括了幾個判斷型函數：

 

- type-of($value)：返回一個值的類型

- unit($number)：返回一個值的單位

- unitless($number)：判斷一個值是否帶有單位

- comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合並

 

type-of() 函數主要用來判斷一個值是屬於什么類型：

 

返回值：

 

- number 為數值型。

- string 為字符串型。

- bool 為布爾型。

- color 為顏色型。

 

>> type-of(100)
"number"
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(true)
"bool"

 

unit() 函數主要是用來獲取一個值所使用的單位，碰到復雜的計算時，其能根據運算得到一個“多單位組合”的值，不過只充許乘、除運算：

 

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)

"em/rem"

 

（上面部分運算出來的單位，對於在 CSS 中使用將是沒有任何意義的。）

 

但加、減碰到不同單位時，unit() 函數將會報錯，除 px 與 cm、mm 運算之外：

 

unitless() 函數相對來說簡單明了些，只是用來判斷一個值是否帶有單位，如果不帶單位返回的值為 true，帶單位返回的值為 false：

 

>> unitless(100)
true
>> unitless(100px)
false
>> unitless(100em)

false

 

 

comparable() 函數主要是用來判斷兩個數是否可以進行“加，減”以及“合並”。如果可以返回的值為 true，如果不可以返回的值是 false：

 

>>

 

comparable(2px,1px)

 

true
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false

 

 

在這里把 Miscellaneous 函數稱為三元條件函數，主要因為他和 JavaScript 中的三元判斷非常的相似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值：

 

if($condition,$if-true,$if-false)

 

上面表達式的意思是當 $condition 條件成立時，返回的值為 $if-true，否則返回的是 $if-false 值。

 

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

 

6.Map

 

 

 

 

 

 

 

7.Sass Maps的函數

---

 

 

前面介紹了使用 map 來管理變量，但要在 Sass 中獲取變量，或者對 map 做更多有意義的操作，我們必須借助於 map 的函數功能。在 Sass 中 map 自身帶了七個函數：

 

- map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。

- map-merge($map1,$map2)：將兩個 map 合並成一個新的 map。

- map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。

- map-keys($map)：返回 map 中所有的 key。

- map-values($map)：返回 map 中所有的 value。

- map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。

- keywords($args)：返回一個函數的參數，這個參數可以動態的設置 key 和 value。

 

map-get($map,$key) 函數的作用是根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中，將返回 null 值。此函數包括兩個參數：

 

- $map：定義好的 map。

- $key：需要遍歷的 key。

 

 

map-has-key($map,$key) 函數將返回一個布爾值。當 $map 中有這個 $key，則函數返回 true，否則返回 false。

（根據上面的代碼演示）

 

 

map-keys($map) 函數將會返回 $map 中的所有 key。這些值賦予給一個變量，那他就是一個列表。如：

 

map-keys($social-colors);

 

其返回的值為：

 

"dribble","facebook","github","google","twitter"

 

換句話說：$list: map-keys($social-colors);

 

相當於：$list:"dribble","facebook","github","google","twitter";

 

這個時候，就可以配合 Sass 的 list 做很多事情。

 

map-values($map)

 

map-values($map) 函數類似於 map-keys($map) 功能，不同的是 map-values($map )獲取的是 $map 的所有 value 值，可以說也將是一個列表。而且，map-values($map) 中如果有相同的 value 也將會全部獲取出來。

 

如前面的示例，使用：map-values($social-colors)

 

將會返回：#ea4c89,#3b5998,#171515,#db4437,#55acee

 

值與值之前同樣用逗號分隔。map-merge($map1,$map2)

 

 

map-merge($map1,$map2) 函數是將 $map1 和 $map2 合並，然后得到一個新的 $map。如果你要快速將新的值插入到 $map 中的話，這種方法是最佳方法。假設我們有兩個 $map:

 

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);

如果希望將這兩個 $map 合並成一個 map，我們只要這樣做：$newmap: map-merge($color,$typo);

將會生成一個新的 map:

$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6

);

 

map-remove($map,$key) 函數是用來刪除當前 $map 中的某一個 $key，從而得到一個新的 map。其返回的值還是一個 map。他並不能直接從一個 map 中刪除另一個 map，僅能通過刪除 map 中的某個 key 得到新 map。如：

 

$map:map-remove($social-colors,dribble);

 

返回的是一個新 map:

 

$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee

);

 

8.RGB顏色函數-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])：把兩種顏色混合在一起。

 

rgba() 函數主要用來將一個顏色根據透明度轉換成 rgba 顏色。

 

其語法有兩種格式：

 

rgba($red,$green,$blue,$alpha)  //將一個rgba顏色轉譯出來，和未轉譯的值一樣
rgba($color,$alpha)  //將一個Hex顏色轉換成rgba顏色

 

//SCSS
.rgba {
    color: rgba(#f36,.5);
    background: rgba(orange,.5);
    border-color: rgba(green,.5);

}

 

Red() 函數

 

red() 函數非常簡單，其主要用來獲取一個顏色當中的紅色值。假設有一個 #f36 的顏色，如果你想得到 #f36 中的 red 值是多少，這個時候使用 red() 函數就能很簡單獲取。

 

>> red(#f36)
255

 

Green() 函數

 

green() 函數和 red() 函數一樣，用來獲取某一個顏色值中 green 的值。同樣拿 ”#f36“ 顏色為例：

 

>> green(#f36)
51

 

Blue() 函數

 

同理，blue() 函數是用來獲取某一個顏色值中 blue 的值，如：

 

>> blue(#f36)
102

 

Mix 函數是將兩種顏色根據一定的比例混合在一起，生成另一種顏色。其使用語法如下：

 

mix($color-1,$color-2,$weight);

 

$color-1 和 $color-2 指的是你需要合並的顏色，顏色可以是任何表達式，也可以是顏色變量。

 

$weight 為 合並的比例（選擇權重），默認值為 50%，其取值范圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當然透明度也會有一定的權重。默認的比例是 50%，這意味着兩個顏色各占一半，如果指定的比例是 25%，這意味着第一個顏色所占比例為 25%，第二個顏色所占比例為75%。

 

其使用方法也很簡單：

 

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

 

8.HSL函數簡介

---

 

在 Sass 中提供了一系列有關於 HSL 的顏色函數，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。接下來我們先來了解一下 HSL 顏色函數包括哪些具體的函數，所起的作用是什么：

 

- hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；

- hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；

- hue($color)：從一個顏色中獲取色相（hue）值；

- saturation($color)：從一個顏色中獲取飽和度（saturation）值；

- lightness($color)：從一個顏色中獲取亮度（lightness）值；

- adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色；

- lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色；

- darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；

- saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色

- desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；

- grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);

- complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);

- invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

 

lighten() 和 darken() 兩個函數都是圍繞顏色的亮度值做調整的，其中 lighten() 函數會讓顏色變得更亮，與之相反的 darken() 函數會讓顏色變得更暗。這個亮度值可以是 0~1 之間，不過常用的一般都在 3%~20% 之間。

 

來看一個簡單的實例，首先定義一個顏色變量：

 

$baseColor: #ad141e;

 

使用 lighten() 和 darken() 函數來修改 10% 的亮度值：

 

//SCSS
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

 

saturate()、desaturate()這兩個函數是通過改變顏色的飽和度來得到一個新的顏色，他們和前面介紹的修改亮度得到新顏色的方法非常相似。

 

//SCSS
$baseColor: #ad141e;
.saturate {
  background: saturate($baseColor,30%); //在原色飽和度基礎上增加飽和度
}
.desaturate {
  background: desaturate($baseColor,30%);//在原色飽和度基礎上減少飽和度
}

 

這個是通過調整顏色的色相換算一個新顏色。他需要一個顏色和色相度數值。通常這個度數值是在 -360deg 至 360deg 之間，當然了可以是百分數：

 

//SCSS
$baseColor: #ad141e;
.adjust-hue-deg {
  background: adjust-hue($baseColor,30deg);
}
.adjust-hue-per {
  background: adjust-hue($baseColor,30%);
}

 

這個函數會顏色的飽和度值直接調至 0%，所以此函數與 desaturate($color,100%) 所起的功能是一樣的。一般這個函數能將彩色顏色轉換成不同程度的灰色。例如：

 

//SCSS
$baseColor: #ad141e;
.grayscale {
  background: grayscale($baseColor);
}
.desaturate {
  background: desaturate($baseColor,100%);
}

9.Opacity函數簡介

 

在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的透明通道做處理，而后者是控制整個元素的透明度。

 

在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度：

 

-       alpha($color) /opacity($color)： 獲取顏色透明度值；

-       rgba($color, $alpha)： 改變顏色的透明度值；

-       opacify($color, $amount) / fade-in($color, $amount) ：使顏色更不透明；

-       transparentize($color, $amount) / fade-out($color, $amount)： 使顏色更加透明。

 

alphpa() 和 opacity() 函數很簡單，與前面介紹的 red(),green() 等函數很類似。這個函數的主要功能是用來獲取一個顏色的透明度值。如果顏色沒有特別指定透明度，那么這兩個函數得到的值都會是 1：

 

>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))

0.8

 

在前面介紹 RGB 函數一節中，還記得嗎？有一個 rgba() 函數可以創建一個顏色，同時還可以對顏色修改其透明度。其可以接受兩個參數，第一個參數為顏色，第二個參數是你需要設置的顏色透明值。

 

>> rgba(red,.5)
rgba(255, 0, 0, 0.5)
>> rgba(#dedede,.5)
rgba(222, 222, 222, 0.5)
>> rgba(rgb(34,45,44),.5)
rgba(34, 45, 44, 0.5)
>> rgba(rgba(33,45,123,.2),.5)
rgba(33, 45, 123, 0.5)
>> rgba(hsl(33,7%,21%),.5)

 

這兩個函數是用來對已有顏色的透明度做一個加法運算，會讓顏色更加不透明。其接受兩個參數，第一個參數是原始顏色，第二個參數是你需要增加的透明度值，其取值范圍主要是在 0~1 之間。當透明度值增加到大於 1 時，會以 1 計算，表示顏色不具有任何透明度。

 

>> opacify(rgba(22,34,235,.6),.2)
rgba(22, 34, 235, 0.8)
>> opacify(rgba(22,34,235,.6),.5)
#1622eb
>> opacify(hsla(22,34%,23%,.6),.15)
rgba(79, 53, 39, 0.75)
>> opacify(hsla(22,34%,23%,.6),.415)
#4f3527
>> opacify(red,.15)
#ff0000

 

transparentize() 和 fade-out() 函數所起作用剛好與 opacify() 和 fade-in() 函數相反，讓顏色更加的透明。這兩個函數會讓透明值做減法運算，當計算出來的結果小於 0 時會以 0 計算，表示全透明。

 

>> transparentize(red,.5)
rgba(255, 0, 0, 0.5)
>> transparentize(#fde,.9)
rgba(255, 221, 238, 0.1)
>> transparentize(rgba(98,233,124,.3),.11)
rgba(98, 233, 124, 0.19)
>> transparentize(rgba(98,233,124,.3),.51)
rgba(98, 233, 124, 0)
>> fade-out(red,.9)
rgba(255, 0, 0, 0.1)
>> fade-out(hsla(98,6%,23%,.5),.1)
rgba(58, 62, 55, 0.4)
>> fade-out(hsla(98,6%,23%,.5),.6)
rgba(58, 62, 55, 0)

 

實戰項目（顏色函數實戰——七色卡）

.....

 

10.Sass 的 @ 規則

 

Sass 支持所有 CSS3 的 @ 規則， 以及一些 Sass 專屬的規則，也被稱為“指令（directives）”。 這些規則在 Sass 中具有不同的功效，

 

@import

 

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 擴展名的同名文件並將其引入。

 

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。來看一個簡單示例：

 

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

 

編譯出來：

 

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

 

@media 也可以嵌套 @media：

 

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

 

Sass 中的 @extend 是用來擴展選擇器或占位符。比如：

 

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

 

被編譯為：

 

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

 

詳細的可以回顧前面介紹的繼承樣式部分。

 

擴展選擇器：

 

@extend 不止擴展類選擇器，還可以擴展任何選擇器，比如 .special.cool, a:hover, 或 a.user[href^=“http://“]，例如：

 

 

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

 

編譯出來：

 

a:hover, .hoverlink {
  text-decoration: underline; }

 

再來看一個復雜點的：

 

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

 

編譯出來的CSS

 

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

 

多個擴展

 

所設某個樣式要繼承多個地方的樣式，那么可以使用 @extend 來繼承多個選擇器或占位符的樣式，如：

 

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

 

編譯出來的CSS

 

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

 

擴展單一選擇器

 

前面我們知道 %placeholder 不使用@extend顯示調用是不會生成任何樣式代碼。那么在選擇器中使用占位符一樣。比如下面的代碼：

 

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

 

這段代碼在不調用之前不產生任何代碼，只有能過@extend調用之后才生成代碼：

 

.notice {
  @extend %extreme;
}

 

@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root。來看一個簡單的示例：

 

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  } 
}

 

編譯出來的CSS

 

.a {
  color: red;
}

.a .b {
  color: orange;
}

.a .b .c {
  color: yellow;
}

.d {
  color: green;
}

 

@debug 在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設置的提示 Bug:

 

@debug 10em + 12em;

 

會輸出：

 

Line 1 DEBUG: 22em

 

@warn 和 @debug 功能類似，用來幫助我們更好的調試 Sass。如：

 

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

 

@error 和 @warn、@debug 功能是如出一轍。

 

@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設置在10以內的數";
  }

}

.test {
  @include error(15);
}