Sass 簡介

Sass 是一個 CSS 的擴展，它在 CSS 語法的基礎(chǔ)上，允許您使用變量（variables）、嵌套規(guī)則（nested rules）、混合（mixins）、導入（inline imports）等功能，令 CSS 更加強大與優(yōu)雅。使用 Sass 以及 Compass 樣式庫有助于更好地組織管理樣式文件，以及更高效地開發(fā)項目。

Sass 的主要特點有：完全兼容 CSS3；在 CSS 語言的基礎(chǔ)上增加變量、嵌套、混合等功能；通過函數(shù)進行顏色值與屬性值的運算；提供控制指令等高級功能以及自定義輸出格式等。

Sass 有兩種語法格式：一種是 SCSS (Sassy CSS)，這種格式僅在 CSS3 語法的基礎(chǔ)上進行擴展，這意味著每個 CSS 樣式表是一個同等的 SCSS 文件，這種語法的樣式表文件需要以 .scss 作為拓展名。另一種是 Sass，它提供了一種更加簡介的方式來書寫 CSS，它使用縮進而不是花括號來表示選擇器的嵌套，用換行而不是分號來分隔屬性，使用此種語法的樣式表文件需要以 .sass 作為擴展名。、

任何一種語法的文件可以直接 import 到另一種語法的文件中使用，只要使用 sass-convert 命令行工具，就可以將一種語法轉(zhuǎn)換為另一種語法：

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.ss

Sass 快速入門

變量：$

在 Sass 中，變量以美元符號 $ 開始，賦值就像設(shè)置 CSS 屬性那樣：

$width: 5em;

你可以在屬性中引用他們:

#main {
  width: $width;
}

變量僅在它定義的選擇器嵌套層級的范圍內(nèi)可用（可以理解為塊級作用域）；不在任何嵌套選擇器內(nèi)定義的變量則在可任何地方使用（可以理解為全局變量）。定義變量的時候可以后面帶上 !global 標志，在這種情況下，變量在任何地方可見（可以理解為全局變量）。例如：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

將編譯為：

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

注：由于歷史原因，變量名（以及其他所有 Sass 標識符）可以互換連字符 - 和下劃線 _。例如，如果你定義了一個名為 $main-width，您可以使用 $main_width 訪問它，反之亦然。

數(shù)據(jù)類型（Data Types）

Sass 支持 7 種主要的數(shù)據(jù)類型：

1. 數(shù)字（例如：1.2, 13, 10px）
2. 文本字符串，帶引號字符串和不帶引號字符串(例如："foo", 'bar', baz）
3. 顏色，例如：blue, #04a3f9, rgba(255, 0, 0, 0.5)
4. 布爾值，例如：true, false）
5. 空值，例如：null）
6. 值列表（list），用空格或逗號分隔。例如：1.5em 1em 0 2em, Helvetica, Arial, sans-serif）
7. maps，從一個值映射到另一個。例如：(key1: value1, key2: value2)

Sass 也支持其他所有類型的 CSS 屬性值，比如 Unicode 字符集，或 !important 聲明。然而，不會對這些類型的屬性值做特殊處理，一律視為不帶引號的字符串。

字符串（Strings）

CSS 指定兩種字符串類型：帶引號的字符串（注：包括雙引號和單引號），如 "Lucida Grande" 或者 'http://sass-lang.com'，還有不帶引號的字符串，如 sans-serif 或者 bold。Sass 都能識別這兩種類型，并且一般來說，在編譯輸出的 CSS 文件中不會改變 Sass 文檔中使用的字符串類型。

有一個例外，當使用 #{} interpolation 時，帶引號的字符串將被編譯為不帶引號的字符串，這樣主要是為了便于使用，比如 mixins 中的選擇器名稱。例如：

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

編譯為：

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

列表（Lists）

列表是指 Sass 如何表示在 CSS 聲明的，類似 margin: 10px 15px 0 0 或 font-face: Helvetica, Arial, sans-serif 這樣的值，列表只是一串其他值，無論是用空格還是用逗號隔開。事實上，獨立的值也被視為列表：只包含一個值的列表。

列表本身沒有太多的功能，但 Sass 列表函數(shù)賦予了數(shù)組更多新功能：

• nth 函數(shù)可以直接訪問數(shù)組中的某一項；
• join 函數(shù)可以將多個數(shù)組連接在一起；
• append 函數(shù)可以在數(shù)組中添加新值；
• @each 指令能夠遍歷數(shù)組中的每一項。

除了包含簡單的值，列表還可包含其他列表。例如，1px 2px, 5px 6px 包含 1px 2px 列表和 5px 6px 列表兩個項。如果內(nèi)外兩層列表使用相同的分隔符號，你需要使用括號將內(nèi)層列表括起來，以明確內(nèi)層類別的開始和結(jié)束位置。

例如，(1px 2px) (5px 6px) 同樣是包含 1px 2px 列表和 5px 6px 列表兩個項的列表。不同的是，該列表層外用空格分隔，之前列表外層是用逗號分隔。

當列表被編譯為 CSS 時，Sass 不會添加任何圓括號，因為 CSS 不能識別他們。這意味著，(1px 2px) (5px 6px) 和 1px 2px 5px 6px 在編譯后的 CSS 文件中看起來是完全一樣的。然而，它們在 Sass 中卻是不同的：第一個是含兩個列表的列表，而第二個是含有四個成員的列表。

用括號 () 表示不包含任何值的空數(shù)組（在 Sass 3.3 版之后也視為空的 map）?？諗?shù)組不可以直接編譯成 CSS，比如編譯 font-family: ()，Sass 將會報錯。如果數(shù)組中包含空數(shù)組或空值，編譯時將被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

列表也可以沒有任何項。這些列表可以用 () 表示（也是一個空的 map）。

逗號分隔的列表可以保留結(jié)尾的逗號。這是特別有用，因為它可以表示一個單個元素的列表。

例如，(1,) 表示為只包含 1 的列表，而 (1 2 3,) 這個表示包含一個列表，這個列表又包含以空格分隔的 1, 2, 和 3 的列表。

Maps

Maps 代表一個鍵和值對集合，其中鍵用于查找值。他們可以很容易地將值收集到命名組中，并且可以動態(tài)地訪問這些組。在CSS中你找不到和他們類似的值，雖然他們的語法類似于媒體查詢表達式：

$map: (key1: value1, key2: value2, key3: value3);

和列表不同，Maps 必須始終使用括號括起來，并且必須用逗號分隔。Maps 中的鍵和值可以是任意的 Sass 對象。一個 Maps 可能只有一個值與給定的鍵關(guān)聯(lián)（盡管該值可以是一個列表）。一個給定的值可能與許多鍵關(guān)聯(lián)。

和列表類似，Maps 的主要操作使用的是 Sass 函數(shù)。

• map-get 函數(shù)用于查找 map 中的值，
• map-merge 函數(shù)用于添加值到 map 中的值，
• @each 指令可以用來為 map 中的每個鍵值對添加樣式。

map 中鍵值對的順序和 map 創(chuàng)建時始終相同。

Maps 還可以用于任何列表能做的事情。當用于一個列表函數(shù)時，map 被視為鍵值對列表。例如，(key1: value1, key2: value2) 被用于列表函數(shù)時，將被視為嵌套列表 key1 value1, key2 value2。列表不能被視為 maps，不過，空列表除外。() 表示一個鍵/值對都沒有的 map，也可以被視為一個沒有元素的列表。

需要注意的是 map 的鍵（keys）可以是任何 Sass 數(shù)據(jù)類型（甚至是另一個map），并且聲明 map 的語法允許是任意的 Sass 表達式，這個表達式將被評估為一個值以確定鍵（keys）。

Maps 不能轉(zhuǎn)換為純 CSS。作為變量的值或參數(shù)傳遞給 CSS 函數(shù)將會導致錯誤。使用 inspect($value) 函數(shù)以產(chǎn)生輸出字符串，這對于調(diào)試 maps 非常有用。

顏色（Colors）

任何 CSS 顏色表達式返回 Sass 顏色值。這其中包括了大量的命名的顏色，這些名字字符串不區(qū)別帶不帶引號。

在壓縮輸出模式，Sass 將輸出 CSS 簡短的顏色表示法。例如，在壓縮模式下 #FF0000 將輸出為 red，但是 blanchedalmond 將輸出為 #FFEBCD（參考顏色轉(zhuǎn)換工具）。

一個用戶遇到的常見問題是在其它輸出模式中 Sass 喜歡輸出與命名的顏色相同的格式，當壓縮的時候，插值到選擇器的顏色變得無效語法。為了避免這種情況，如果他們是為了在選擇施工中使用，總是給命名的顏色。

運算 (Operations)

所有數(shù)據(jù)類型的支持相等運算 == 和 !=。此外，每種類型都有其自己特殊的運算方式。

數(shù)字運算 (Number Operations)

Sass 支持對數(shù)字標準的算術(shù)運算（加法 +，減法 - ，乘法 *，除法 / 和取模 %）。Sass 數(shù)學函數(shù)在算術(shù)運算期間會保留單位。這意味著，就像在現(xiàn)實生活中，你不能用不相同的單位數(shù)字進行算術(shù)運算（比如數(shù)字后面添加了 px 和 em 單位）；另外，兩個單位相同的數(shù)字相乘將產(chǎn)生單位平方，如：10px * 10px == 100px * px)。要知道，px * px 是無效的 CSS 單位，此時，Sass 會拋出一個錯誤，因為你試圖在 CSS 中使用無效的單位。

數(shù)字支持關(guān)系運算符 <, >, <=, >=)，并且所有類型支持相等運算符 == 和 !=。

除法和 / 

CSS 允許 / 出現(xiàn)在屬性值之間作為分隔數(shù)字的方式，例如 font 屬性，p.ex2 { font:italic bold 12px/20px arial,sans-serif;}。由于 Sass 是 CSS 屬性語法的擴展，所以它必須支持這一點，同時還允許 / 用于除法。這意味著，在默認情況下，在 Sass 中如果兩個數(shù)字由 / 分隔，在返回的CSS中將以同樣的方式出現(xiàn)。

但是，有三種情況會將 / 解析為除法，這涵蓋了絕大多數(shù)當做除法的案例：

1. 如果該值，或值的任何部分，存儲在一個變量中或通過函數(shù)返回
2. 如果該值是由括號括起來的，除非這些括號是在一個列表（list）外部，并且值是括號內(nèi)部
3. 如果該值被用作另一個算術(shù)表達式的一部分

例如:

p {
  font: 10px/8px;             // 原生的CSS，不作為除法
  $width: 1000px;
  width: $width/2;            // 使用了變量, 作為除法
  width: round(1.5)/2;        // 使用了函數(shù), 作為除法
  height: (500px/2);          // 使用了括號, 作為除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作為除法
  font: (italic bold 10px/8px); // 在一個列表（list）中，括號可以被忽略。
}

編譯后將得到：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

如果你想讓 / 和變量一起使用（即 / 不作為除法使用），你可以使用 #{} 插入他們。例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

編譯后將得到：

p {
  font: 12px/30px;
}

減法，負數(shù)，和 -

在 CSS 和在 Sass 中，連字符 - 有許多不同的意義。它可以是一個減法運算符（比如在 5px - 3px 中），也可以表示一個負數(shù)（比如在 -3px 中），還可以是一個一元負運算符（比如在 -$var 中），或是標識符的一部分（比如在 font-weight 中）。大多數(shù)時候，我們可以很容易的分辨 - 到底代表什么，但也有一些棘手的情況。

遵循以下規(guī)則，可以讓我們安全地使用連字符：

• 減法的時候，總是在 - 兩側(cè)保留空格
• 當表示一個負數(shù)或一元負運算時候，在 - 前面包含一個空格，后面不加空格
• 如果在一個空格隔開的列表中，可以將一元負運算使用括號括起來，比如在 10px (-$var) 中

- 的不同含義的優(yōu)先順序如下：

• - 作為標識符的一部分。這意味著 a-1 是一個不帶引號的字符串，其值為 "a-1" 。唯一的例外是單位；Sass 通常允許任何有效的標識符被用作一個標識符，但標識符不可能以數(shù)字或連字符開始。這意味著，5px-3px 和 5px - 3px 是相同。
• - 在不帶空格兩個數(shù)字之間。這表明是減法，所以 1-2 和 1 - 2 是相同的。
• 字面數(shù)字以 - 開頭。這表明是一個負數(shù)，所以 1 -2 是一個含有 1 和 -2 的列表。
• - 兩個數(shù)字之間，不論是否帶空格。這表明是減法，所以 1 -$var 和 1 - $var 是相同的。
• - 在值之前。這表明是一元負運算符；該操作需要一個數(shù)字，并返回其負值。

顏色運算 (Color Operations)

所有算術(shù)運算都支持的顏色值，顏色值的運算是分段進行計算的，也就是，依次計算紅(red)，綠(green)，以及藍(blue)的成分值。例如：

p {
  color: #010203 + #040506;
}

計算 01 + 04 = 05, 02 + 05 = 07, 和 03 + 06 = 09，并且編譯為：

p {
  color: #050709;
}

通常，Sass 提供的顏色函數(shù)比嘗試使用顏色運算更加有用，以達到同樣的效果。

數(shù)字和顏色值之間的算術(shù)運算也是分段。例如：

p {
  color: #010203 * 2;
}

計算 01 * 2 = 02, 02 * 2 = 04, 和 03 * 2 = 06，并且編譯為：

p {
  color: #020406;
}

需要注意的是，包含 alpha 通道（那些由 rgba 或 hsla 函數(shù)創(chuàng)建的）的顏色必須具有相同的 alpha 值，才能進行顏色運算。這樣算術(shù)不會影響 alpha 值。例如：

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

將被編譯為：

p {
  color: rgba(255, 255, 0, 0.75);
}

顏色的 alpha 通道可以使用 opacify 和 transparentize 函數(shù)進行調(diào)整。例如：

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

將被編譯為：

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25);
}

IE 瀏覽器的濾鏡（filters）要求所有的顏色包括 alpha 層，而且格式必須是固定的 #AABBCCDD，使用 ie_hex_str 函數(shù)可以輕松的將顏色轉(zhuǎn)化為 IE 濾鏡所要求的格式。例如：

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

將被編譯為：

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

 

字符串運算 (String Operations)

+ 運算可用于連接字符串:

p {
  cursor: e + -resize;
}

將被編譯為：

p {
  cursor: e-resize;
}

請注意，如果帶引號的字符串被添加到不帶引號的字符串中（也就是說，帶引號的字符串在 + 的左側(cè)），

那么返回的結(jié)果是帶引號的字符串。同樣，如果一個不帶引號的字符串添加到帶引號的字符串中（不帶引號的字符串在 + 的左側(cè)）那么返回的結(jié)果是一個不帶引號的字符串。 例如：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

將被編譯為：

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

默認情況下，運算表達式與其他值連用時，用空格做連接符：

p {
  margin: 3px + 4px auto;
}

將被編譯為：

p {
  margin: 7px auto;
}

在文本字符串中，#{} 式插值可以用來在字符串中放置動態(tài)值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

將被編譯為：

p:before {
  content: "I ate 15 pies!";
}

在字符串插值時，Null 值被視為空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

將被編譯為：

p:before {
  content: "I ate  pies!";
}

布爾運算 (Boolean Operations)

Sass 支持布爾值的 and, or, 和 not 運算。

列表運算 (List Operations)

數(shù)組不支持任何特殊運算，只能使用 list 函數(shù) 控制。

圓括號 (Parentheses)

圓括號可以用來影響運算的順序(即優(yōu)先級)：

p {
  width: 1em + (2em * 3);
}

將被編譯為：

p {
  width: 7em;
}

函數(shù) (Functions)

Sass 定義了一些有用的函數(shù)， 這些函數(shù)可以像普通 CSS 函數(shù)語法一樣調(diào)用：

p {
  color: hsl(0, 100%, 50%);
}

編譯為：

p {
  color: #ff0000;
}

可用函數(shù)的完整列表，請參閱 Sass 官網(wǎng)網(wǎng)站。

關(guān)鍵詞參數(shù) (Keyword Arguments)

Sass 函數(shù)允許指定明確的關(guān)鍵詞參數(shù)進行調(diào)用。 上面的例子也可以改寫成：

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

雖然不夠簡明，但至少可以讓 Sass 代碼閱讀起來更加方便。 關(guān)鍵詞參數(shù)讓函數(shù)具有更靈活的接口， 即便參數(shù)眾多，也不會讓使用變得困難。

命名參數(shù)（named arguments）可以以任意順序傳入，并且，具有默認值的參數(shù)可以省略掉。 由于命名參數(shù)也是變量名稱，因此，下劃線、短橫線可以互換使用。

完整的 Sass 函數(shù)列表和它們的參數(shù)名稱，以及在 Ruby 里如何定義你自己的函數(shù)的步驟，請參考 Sass 官網(wǎng)手冊。

插值：#{}

您還可以通過 #{} 插值語法在選擇器和屬性名中使用 Sass 變量：

$name: foo;
$attr: border;

p.#{$name} {
      #{$attr}-color: blue;
}

將被編譯為：

p.foo {
  border-color: blue;
}

它也可以使用 #{} 插值語句把 Sass 插入到屬性值中。在大多數(shù)情況下，這種做可能還不如使用直接變量來的方便，但使用 #{} 意味著靠近它的運算符都將被視為純 CSS（注：可以避免各種運算）。 例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

編譯后得到：

p {
  font: 12px/30px;
}

Sass 中的 & 符號

Sass 中的 & 指向當前選擇器的父選擇器。下面是一個逗號分隔的列表中包含一個空格的分隔列表：

.foo.bar .baz.bang, .bip.qux {
  $selector: &;
}

$selector 的值是現(xiàn)在 ((".foo.bar" ".baz.bang"), ".bip.qux")。這個混合選擇器在這里加了引號，以表明他們是字符串，但在現(xiàn)實中，他們將不帶引號的。即使選擇器不包含逗號或空格，& 總會有兩個嵌套層次，因此它可以保證訪問一致性。

如果沒有父選擇器，& 的值將是空。這意味著你可以在一個 mixin 中使用它來檢測父選擇是否存在：

@mixin does-parent-exist {
  @if & {
    &:hover {
      color: red;
    }
  } @else {
    a {
      color: red;
    }
  }
}

變量默認: !default

如果分配給變量的值后面添加了!default 標志 ，這意味著該變量如果已經(jīng)賦值，那么它不會被重新賦值，但是，如果它尚未賦值，那么它會被賦予新的給定值。

例如:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

將被編譯為：

#main {
  content: "First content";
  new-content: "First time reference";
}

通過 !default 賦值的時候，如果變量是 null 值時，將視為未賦值：

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

將被編譯為：

#main {
  content: "Non-null content";
}

@ 規(guī)則和指令

Sass 支持所有 CSS3 的 @ 規(guī)則，以及一些已知的其他特定的 Sass 指令。這些在 Sass 都有對應的效果。

@import

Sass 擴展了 CSS @import 規(guī)則，允許其導入 SCSS 或 Sass 文件。被導入的全部SCSS 或 Sass文件將一起合并到同一個 CSS 文件中。此外，被導入文件中所定義的任何變量或混入（mixins）都可以在主文件（注：主文件值的是導入其他文件的文件，即，A 文件中導入了 B 文件，這里的主文件指的就是 A 文件）中使用。

Sass 會在當前目錄和 Rack, Rails, Merb 目錄下查找其他 Sass 文件。附加搜索目錄可以使用 :load_paths 選項或命令行中的 --load-path 選項指定。

通常，@import 尋找 Sass 文件并將其導入，但在以下情況下，@import 僅作為普通的 CSS 語句，不會導入任何 Sass 文件。

@import 需要一個文件名來導入。默認情況下，它會尋找一個 Sass 文件直接導入，但在以下情況下，僅作為普通的 CSS @import 規(guī)則語句，不會導入任何 Sass 文件。

• 如果文件的擴展名是 .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);

Sass 支持在一個 @import 規(guī)則中同時導入多個文件。例如：

@import "rounded-corners", "text-shadow";

將同時導入 rounded-corners 和 text-shadow 這兩個文件。

導入規(guī)則中可能含有 #{} 插值，但存在一定的限制。不能通過變量動態(tài)導入Sass文件；#{} 插值僅適用于 CSS 導入規(guī)則。 因此，它僅適用于 url() 導入。

例如：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

將編譯為：

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

Partials

如果你有一個 SCSS 或 SASS 文件要導入，但不希望將其編譯到一個 CSS 文件，你可以在文件名的開頭添加一個下劃線。這將告訴 Sass 不要將其編譯到一個正常的 CSS 文件。然后，在導入語句中卻不需要添加下劃線。

例如，你可能有一個命名為 _colors.scss 的文件，但是不會編譯成 _colors.css 文件。你可以這么做

@import "colors";

這樣， _colors.scss 將被導入。

注意：請不要將帶下劃線與不帶下劃線的同名文件放置在同一個目錄下，比如，_colors.scss 和 colors.scss 不能同時存在于同一個目錄下，否則帶下劃線的文件將會被忽略。

嵌套 @import

雖然在大部分情況下，一般都是在文檔的頂層（注：最外層，不在嵌套規(guī)則內(nèi)）使用 @import，但是也可以在 CSS 規(guī)則和 @media 規(guī)則中包含 @import 語句。就像一個基層的 @import，這里會包含 @import 導入文件的內(nèi)容。但是，這樣導入的規(guī)則只能嵌套在原先防止 @import 的地方。

舉個例子，如果 example.scss 包含：

.example {
  color: red;
}

然后：

#main {
  @import "example";
}

這等同于：

#main {
  .example {
      color: red;
    }
}

編譯后，最終將得到：

#main .example {
  color: red;
}

該指令只允許出現(xiàn)在文檔頂層，像 @mixin 或者 @charset 在文件中，不允許被 @import 導入到一個嵌套上下文中。

不允許在混人 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media

Sass 中 @media 指令的行為和純 CSS 中一樣，只是增加了一點額外的功能：它們可以嵌套在CSS規(guī)則。如果一個 @media 指令出現(xiàn)在 CSS 規(guī)則中，它將被冒泡到樣式表的頂層，并且包含規(guī)則內(nèi)所有的選擇器。這使得很容易地添加特定 @media 樣式，而不需要重復使用選擇器，或打亂樣式表書寫流。例如：

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

編譯為：

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

@media的查詢（queries）也可以相互嵌套。這些查詢（queries）在編譯時，將會使用 and 操作符號結(jié)合。例如：

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

編譯為：

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

@media 甚至可以使用 Sass（比如變量，函數(shù)，以及運算符）代替條件的名稱或者值：

最后，@media 查詢（queries）可以包含 Sass 表達式（包括變量 variables，函數(shù) functions 和操作符 operators）代替特征名稱和特征值。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

編譯為：

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

@extend

設(shè)計一個頁面時常常遇到這種情況：當一個樣式類（class）含有另一個類的所有樣式，并且它自己的特定樣式。處理這種最常見的方法是在HTML同時使用一個通用樣式類和特殊樣式類。例如，假設(shè)我們設(shè)計需要一個普通錯誤的樣式和一個嚴重錯誤的樣式。我們可以類似這樣寫：

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

我們的樣式如下：

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

不幸的是，這意味著，我們必須時刻記住使用 .seriousError 的時候需要搭配使用 .error。這對于維護來說是一個負擔，甚至導致棘手的錯誤，并且導致無語意的樣式。

@extend 指令避免這些問題，告訴 Sass 一個選擇器的樣式應該繼承另一選擇器。 例如：

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

編譯為：

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

.seriousError {
  border-width: 3px;
}

這意味著 .error 所定義的所有樣式也適用于 .seriousError，除了 .seriousError 的特定樣式。相當于，每個帶有 .seriousError 類的元素也帶有 .error 類。

其他使用了 .error 規(guī)則也會同樣繼承給 .seriousError，例如，如果我們有特殊錯誤樣式的 hack：

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

然后 <div class="seriousError intrusion"> 也同樣會使用了 hacked.png 背景。