展開 折疊

Sass 3.4.21 中文手冊

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

特色 (Features)

  • 完全兼容 CSS3
  • 在 CSS 語言的基礎上增加變量(variables)、嵌套 (nesting)、混合 (mixins) 等功能
  • 通過函數進行顏色值與屬性值的運算
  • 提供 控制指令等高級功能
  • 自定義輸出格式

語法 (Syntax)

Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) ,也是本參考資料示例所使用的格式 , 這種格式僅在 CSS3 語法的基礎上進行擴展,這意味著每個CSS樣式表是一個同等的SCSS文件。此外,SCSS 也支持大多數 CSS hacks 寫法 以及瀏覽器專屬前綴語法 (vendor-specific syntax),例如,IE 古老的 filter 語法。 這種語法的樣式表文件需要以 .scss 作為拓展名。

另一種,也是最早的語法,被稱為縮進語法 (Indented Sass),或者通常說的 "Sass",它提供了一種更加簡介的方式來書寫CSS。它使用縮進而不是花括號來表示選擇器的嵌套,用換行而不是分號來分隔屬性,一些人認為這樣做比 SCSS 更容易閱讀,書寫也更快速。 縮排語法具有 Sass 的所有特色功能, 雖然有些語法上稍有差異; 具體差異在縮進語法參考中都有描述。 使用此種語法的樣式表文件需要以 .sass 作為擴展名。

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

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

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

請注意,此命令 不會 生成CSS文件。要想生成CSS文件,請使用其他地方描述的 sass 命令。

使用 Sass (Using Sass)

Sass 有三種使用方式:作為命令行工具,作為獨立的 Ruby 模塊 (Ruby module),或者作為 Rack-enabled 框架的插件,包括 Ruby on Rails 與 Merb。無論使用哪種方式都需要首先安裝 Sass gem :

gem install sass 

如果你使用的是Windows ,你可能首先需要安裝Ruby

如果要在命令行中運行 Sass ,只要使用

sass input.scss output.css 

你還可以使用Sass命令來監視某個Sass文件的改動,并自動編譯來更新 CSS :

sass --watch input.scss:output.css 

如果你的目錄里有很多 Sass 文件,你也可以使用Sass命令來監視整個目錄:

sass --watch app/sass:public/stylesheets 

使用 sass --help 可以列出完整的幫助文檔。

在 Ruby 中使用 Sass 也非常容易,Sass gem 安裝完畢后,用它運行 require "sass", 然后按照下面的方法使用 Sass::Engine

engine = Sass::Engine.new("#main {background-color: #0000ff}", :syntax => :scss)
engine.render #=> "#main { background-color: #0000ff; }\n" 

Rack/Rails/Merb 插件(Plugin)

在 Rails 3 之前的版本中啟用 Sass,需要在 environment.rb 文件中添加一行代碼:

config.gem "sass" 

對于 Rails 3,則是把這一行加到 Gemfile 中:

gem "sass" 

要在 Merb 中啟用 Sass,需要在 config/dependencies.rb 文件中添加一行代碼:

dependency "merb-haml" 

在 Rack 應用中啟用 Sass,需要在 config.ru 文件中添加以下代碼:

require 'sass/plugin/rack'
use Sass::Plugin::Rack 

Sass 樣式表跟視圖(views)的工作方式不同。 它不包含任何動態內容, 因此只需要在 Sass 文件更新時生成 CSS 即可。 默認情況下,.sass.scss 文件是放在 public/stylesheets/sass 目錄下的(這可以通過 :template_location 選項進行配置)。 然后,在需要的時候,它們會被編譯成相應的 CSS 文件并被放到 public/stylesheets 目錄下。 例如,public/stylesheets/sass/main.scss 文件將會被編譯為 public/stylesheets/main.css 文件。

緩存 (Caching)

默認情況下,Sass 會自動緩存編譯后的模板(template)與 partials,這樣做能夠顯著提升重新編譯的速度,在處理 Sass 模板被切割為多個文件并通過 @import 導入,形成一個大文件時效果尤其顯著。

如果不使用框架的情況下,Sass 將會把緩存的模板放入 .sass-cache 目錄。 在 Rails 和 Merb 中,緩存的模板將被放到tmp/sass-cache 目錄。 此目錄可以通過:cache_location 選項進行自定義。 如果你不希望 Sass 啟用緩存功能, 可以將 :cache 選項設置為 false

配置選項 (Options)

選項可以通過設置的Sass::Plugin#options hash,具體設置在Rails中的environment.rb或者Rack中的config.ru的文件中:

Sass::Plugin.options[:style] = :compact 

或者,如果你使用Merb,那么可以在init.rb文件中設置Merb::Plugin.config[:sass] hash :

Merb::Plugin.config[:sass][:style] = :compact 

或者通過傳遞一個選項 (options) hash 給Sass::Engine#initialize
所有相關的選項也可通過標記在sassscss命令行可執行文件中使用。可用選項有:

選項 描述
:style 設置輸出CSS的代碼風格,可以查看輸出的代碼風格
:syntax 輸入文件的語法,:sass 表示縮進語法,:scss表示CSS擴展語法。只有在你自己構造Sass::Engine 實例的情況下有用;當你使用 Sass::Plugin時,它會自動設置正確的值。默認設置為 :sass
:property_syntax 強制縮進語法文檔使用一個屬性語法。如果不使用正確的語法,將拋出一個錯誤。:new值表示強制在屬性名后面使用一個冒號。例如:color: #0f3或者 width: $main_width:old值表示強制在屬性名前面使用一個冒號。例如::color #0f3 或者 :width $main_width。默認請客下,兩種語法都是有效的。該選項對于SCSS(.scss)文檔是無效的。
:cache 解析 Sass 時是否應該緩存,允許更快的編譯速度。默認設置為 true
:read_cache 如果設置了這個選項,而沒有設置:cache選項,那么緩存存在就只讀 Sass 緩存,如果沒有沒有緩存,那就不會編譯。
:cache_store 如果該選項設置為 Sass::CacheStores::Base 的子類的實例,該緩存存儲將被用于存儲和檢索緩存編譯結果。默認設置為Sass::CacheStores::Filesystem,初始化使用:cache_location 選項
:never_update CSS文件永遠不應該被更新,即使是模板(template)文件改變。將其設置為true可能會帶來小的性能提升。它總是默認為false。該選項只有在Rack,Ruby on Rails,或Merb中有意義。
:always_update CSS文件總是應該進行更新,即使是在每一個控制器被訪問時,而不是只當模板被修改時更新。默認為false。該選項只有在Rack,Ruby on Rails,或Merb中有意義。
:always_check Sass模板總是應該被檢查是否更新,即使是在每一個控制器被訪問時,而不是只在服務啟動時。如果一個Sass模板(template)被更新,它會被重新編譯并且覆蓋相應的CSS文件。在生產模式中默認為false,否則true。該選項只有在Rack,Ruby on Rails,或Merb中有意義。
:poll 如果為true,始終使用Sass::Plugin::Compiler#watch后端輪詢而不是本機文件系統的后端。
:full_exception Sass代碼中錯誤是否應該在生成的CSS文件中提供詳細的說明。如果設置為true,這個錯誤將顯示在CSS文件的注釋中 和頁面頂部(支持的瀏覽器),錯誤內容包括行號和源代碼片段。 否則,異常將在Ruby代碼中提醒。在生產模式中默認為false,否則true
:template_location 一個路徑,應用根目錄中Sass模板(template)的目錄。如果散列,:css_location 將被忽略,并且這個選項指定輸入和輸出目錄之間的映射。也可以給定二元列表,代替散列(hash)。默認為css_location + "/sass"。該選項只有在Rack,Ruby on Rails,或Merb中有意義。請注意,如果指定了多個模板位置,它們全部都放置在導入路徑中,允許你在它們之間進行導入。
需要注意的是,由于它可以采用許多可能的格式,這個選項應該只直接設置,不應該被訪問或修改。使用 Sass::Plugin#template_location_arraySass::Plugin#add_template_locationSass::Plugin#remove_template_location方法來代替。
:css_location CSS文件輸出的路徑,當:template_location選項為一個散列(hash)時,這個選項將被忽略。默認設置為"./public/stylesheets"。該選項只有在Rack,Ruby on Rails,或Merb中有意義。
:cache_location 其中,高速緩存sassc 文件應寫入的路徑。在Rails和Merb中默認為"./tmp/sass-cache",否則默認為"./.sass-cache" 。如果設置了:cache_store 選項,這個將被忽略。
:unix_newlines 如果為true,寫入文件時使用Unix風格的換行符。只有在Windows上,并且只有當Sass被寫入文件時有意義(在 Rack, Rails, 或 Merb中,直接使用Sass::Plugin時,或者使用命令行可執行文件時)。
:filename 被渲染文件的文件名。這完全是用于報告錯誤,使用Rack, Rails, or Merb時自動設置。
:line Sass模板(template)第一行的行號。用于報告錯誤的行號。如果Sass模板(template)嵌入一個Ruby文件中,這個設置是很有用的。
:load_paths 一個數組,包含文件系統 或 通過@import指令導入的 Sass模板(template)路徑。他們可能是字符串, Pathname (路徑名)對象或者是Sass::Importers::Base的子類。該選項默認為工作目錄,并且在Rack, Rails, 或 Merb中,該選項無論如何值都是:template_location。加載路徑也可以由Sass.load_pathsSASS_PATH 環境變量通知。
:filesystem_importer 一個Sass::Importers::Base的子類,用來處理普通字符串的加載路徑。這應該從文件系統導入文件。這應該是一個通過構造函數帶一個字符串參數(加載路徑),繼承自Sass::Importers::Base的Class對象。默認為Sass::Importers::Filesystem
:sourcemap 控制如何生產sourcemap。這些sourcemaps告訴瀏覽器如何找到Sass樣式,從而生成每一個CSS樣式。該選項有三個有效值::auto在可能的情況下使用相對URI,假設在你使用的任何服務器上提供的源樣式,那么它們的相對位置將和本地文件系統是相同的。如果一個相對URI不可用,那么將被"file:"替換。:file總是使用"file:" URI,這將在本地工作,但不能被部署到一個遠程服務器。 :inline包含sourcemap中完整的源文本,這是最方便的,但是可能生產非常大的sourcemap文件。 最后,:none 會導致總是不會生成sourcemap文件。
:line_numbers 當設置為true的時候,定義的選擇器的行號和文件名 將被作為注釋注入到編譯的CSS中。這對調試來說是有用的,特別是使用@import@mixin的時候。這個選項有個別名叫做:line_comments。當使用 :compressed輸出樣式或使用:debug_info/:trace_selectors選項時這個選項將自動禁用。
:trace_selectors 當設置為true的時候,將在每個選擇器之前注入@import@mixin的完整軌跡。在瀏覽器中調試通過@import@mixin包含進來的樣式表時是很有用的。此選項將取代 :line_comments 選項,并且被:debug_info選項取代。當使用 :compressed輸出樣式時,這個選項將自動禁用。
:debug_info 當設置為true的時候,定義的選擇器的行號和文件名 將被注入到編譯后的CSS中,可以被瀏覽器所識別。用于FireSass Firebug 擴展,以顯示Sass文件名和行號。當使用 :compressed輸出樣式時,這個選項將自動禁用。
:custom 這個選項可用于單個應用程序設置以使數據可用于定制Sass功能
:quiet 當設置為true的時候,導致禁用警告信息。

語法選擇(Syntax Selection)

Sass命令行工具將使用文件擴展名以確定你使用的是哪種語法,但并不總是一個文件名。sass命令行程序默認為縮進語法,但如果輸入應該被解析為SCSS語法,你可以傳遞--scss選項給她。此外,你可以使用scss命令行程序,它和sass程序完全一樣,但是他的默認語法為SCSS。

編碼格式 (Encodings)

在 Ruby 1.9 及以上環境中運行 Sass 時,Sass 對文件的編碼格式比較敏感,首先會根據 CSS spec 判斷樣式文件的編碼格式, 如果失敗則檢測 Ruby 字符串編碼。也就是說,Sass 首先檢查 Unicode 字節順序標記,然后是 @charset 聲明,最后是 Ruby 字符串編碼,假如都沒有檢測到,默認使用 UTF-8 編碼。

要明確指定樣式表的編碼,與 CSS 相同,使用@charset聲明。在樣式文件的起始位置(前面沒有任何空白與注釋)插入 @charset "encoding-name";, Sass 將會按照給定的編碼格式編譯文件。注意,無論你使用哪種編碼,它必須可以轉換為 Unicode 字符集。

默認情況下,Sass 總會以UTF-8編碼輸出 CSS 文件。當且僅當輸出文件包含非ASCII字符時,才會在輸出文件中添加 @charset 聲明,在壓縮模式中,而在壓縮模式下 (compressed mode) 使用 UTF-8字節順序標記代替 @charset 聲明語句。

CSS擴展 (CSS Extensions)

嵌套規則 (Nested Rules)

Sass 允許將一個 CSS 樣式嵌套進另一個樣式中,內層樣式僅適用于外層樣式的選擇器范圍內(手冊網注:可以理解為層級選擇器),例如:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
} 

編譯為:

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; } 

這有助于避免父選擇器重復,相對于復雜的CSS布局中多層嵌套的選擇器 要簡單得多。 例如:

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
} 

編譯為:

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; } 

引用父選擇器:& (Referencing Parent Selectors: &)

有些時候需要直接使用嵌套外層的父選擇器,這個就很有用了,例如,你可能喜歡給選擇器指定 hover樣式,或者當body元素具有某個樣式時,在這些情況下,你可以 & 字符來明確地表示插入指定父選擇器。 例如:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
} 

編譯為:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; } 

&將替換為呈現在CSS文件中的父選擇器。這意味著,如果你有一個多層嵌套的規則,父選擇器將在被&替換之前完全分解。 例如:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
} 

編譯為:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; } 

& 必須出現在的選擇器的開頭位置(手冊網注:也就是作為選擇器的第一個字符),但可以跟隨后綴,將被添加到父選擇的后面。 例如:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
} 

編譯為:

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; } 

父選擇器 & 被作為一個后綴的時候,Sass 將拋出一個錯誤。

嵌套屬性 (Nested Properties)

CSS中有一些屬性遵循相同的“命名空間”;比如,font-family, font-size, 和 font-weight都在font命名空間中。在CSS中,如果你想在同一個命名空間中設置一串屬性,你必須每次都輸出來。Sass為此提供了一個快捷方式:只需要輸入一次命名空間,然后在其內部嵌套子屬性。例如:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
} 

編譯為:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; } 

命名空間也可以有自己的屬性值。例如:

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
} 

編譯為:

.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
} 

占位符選擇器: %foo (Placeholder Selectors: %foo)

Sass 支持一種特殊類型的選擇器,叫做"占位符選擇器" (placeholder selector)。這些看起來像 class 和 id 選擇器,除了#.%替換。他們需要在@extend 指令中使用;有關詳細信息,請參閱@extend-Only Selectors

當他們單獨使用的時候,即沒有使用@extend的,使用占位符選擇器的規則集將不會被渲染為CSS。

注釋: /* *///(Comments: /* */ and //

Sass 支持標準的CSS多行注釋以/* */以及單行注釋 //。在盡可能的情況下,多行注釋會被保留在輸出的CSS中,而單行注釋會被刪除。 例如:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; } 

編譯為:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; } 

如果多行注釋的第一個字母是 !,那么注釋總是會被保留到輸出的CSS中,即使在壓縮輸出模式下。這可用于在你生成的CSS中添加版權聲明。

使用插值語句 (interpolation) ,可以將變量值輸出到多行注釋中,例如:

$version: "1.2.3";
    /* This CSS is generated by My Snazzy Framework version #{$version}. */ 

編譯為:

/* This CSS is generated by My Snazzy Framework version 1.2.3. */ 

SassScript

除了普通的CSS屬性的語法,Sass 支持一些擴展,名為SassScript。SassScript允許屬性使用變量,算術和額外功能。SassScript可以在任何屬性值被使用。

SassScript也可以用來生成選擇器和屬性名稱,當編寫mixins時非常有用。這是通過 interpolation(插值) 完成。

交互式 shell(Interactive Shell)

Interactive Shell 可以在命令行中測試 SassScript 的功能。在命令行中輸入 sass -i,然后輸入想要測試的 SassScript 查看輸出結果:

您可以使用交互式shell(Interactive Shell)輕松地嘗試 SassScript。
要箱運行啟動 shell ,只要使用-i選項的 sass 命令行(手冊網注:在命令行中輸入 sass -i)。
在提示符下,輸入任何合法的 SassScript表達式,由它他評估并打印出您的結果:

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white 

變量: $(Variables: $

使用SassScript最直截了當的方法是使用變量。變量以美元符號開始,賦值像設置CSS屬性那樣:

$width: 5em; 

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

#main {
  width: $width;
} 

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

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

#sidebar {
  width: $width;
} 

編譯為:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
} 

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

數據類型 (Data Types)

SassScript 支持 7 種主要的數據類型:

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

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

字符串(Strings)

CSS指定兩種字符串類型:帶引號的字符串(手冊網注:包括雙引號和單引號),如"Lucida Grande" 或者 'http://sass-lang.com',還有不帶引號的字符串,如sans-serif 或者 bold。SassScript 識別這兩種類型,并且一般來說,在編譯輸出的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)

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

列表本身沒有太多的功能,但 Sass list functions 賦予了數組更多新功能:nth 函數可以直接訪問數組中的某一項;join 函數可以將多個數組連接在一起;append 函數可以在數組中添加新值;而 @each 指令能夠遍歷數組中的每一項。

列表本身沒有太多的功能,但是 SassScript list functions 使它們非常有用。nth 函數可以直接訪問列表中的某一項;join 函數可以將多個列表拼接在一起;append 函數可以將某項添加到列表中;@each 指令可以將添加樣式到列表中的每一項。

除了包含簡單的值,列表可包含其他列表。例如,1px 2px, 5px 6px包含1px 2px列表和5px 6px列表兩個項。如果內外兩層列表使用相同的分隔符號,你需要使用括號將內層列表括起來,以明確內層類別的開始和結束位置。
例如,(1px 2px) (5px 6px) 同樣是包含1px 2px列表和5px 6px列表兩個項的列表。不同的是,該列表層外用空格分隔,之前列表外層是用逗號分隔。

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

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

列表也可以沒有任何項。這些列表可以用 () 表示(也是一個空的 map)。
它們不能直接輸出到CSS;如果你試圖這樣做,例如font-family: (),Sass 將會報錯。如果列表中包含空列表或空值,比如 1px 2px () 3px 或者 1px 2px null 3px,在包含列表編譯成CSS前,空列表和空值將被刪除。

逗號分隔的列表可以保留結尾的逗號。這是特別有用,因為它可以表示一個 單個元素的列表。
例如,(1,)表示為只包含1的列表,而(1 2 3,)這個表示包含一個列表,這個列表又包含以空格分隔的1,2, 和 3的列表。

Maps

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

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

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

和列表(Lists)類似,Maps的主要操作使用的是 SassScript 函數map-get函數用于查找map中的值,map-merge函數用于添加值到map中的值, @each 指令可以用來為 map 中的每個鍵值對添加樣式。map中鍵值對的順序和map創建時始終相同。

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

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

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

顏色(Colors)

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

在壓縮輸出模式,Sass 將輸出CSS簡短的顏色表示法。例如,在壓縮模式下 #FF0000 將輸出為red,但是blanchedalmond將輸出為 #FFEBCD

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

運算 (Operations)

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

數字運算 (Number Operations)

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

數字支持關系運算符(<, >, <=, >=),并且所有類型支持相等運算符(==, !=)。

除法和 / (Division and /

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

但是,這里有將/解析為除法三種情況。這些涵蓋了絕大多數當做除法的案例。 他們是:

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

例如:

p {
  font: 10px/8px;             // 原生的CSS,不作為除法
  $width: 1000px;
      width: $width/2;            // 使用了變量, 作為除法
  width: round(1.5)/2;        // 使用了函數, 作為除法
  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; } 

如果你想純CSS 的/ 和變量一起使用(手冊網注:即/不作為除法使用),你可以使用#{}插入他們。例如:

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

編譯為:

p {
  font: 12px/30px; } 
減法,負數,和 -(Subtraction, Negative Numbers, and -)

在CSS和在Sass中 - 有許多不同的意義。它可以是一個減法運算符(比如在5px - 3px中),也可以表示一個負數(比如在-3px中),還可以是一個一元負運算符(比如在-$var中),或是標識符的一部分(比如在font-weight中)。大多數時候,我們可以很容易的分辨- 到底代表什么,但也有一些棘手的請客。以下作為一般規則,你是最安全的使用-

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

- 的不同含義的優先順序如下:

  1. - 作為標識符的一部分。這意味著a-1是一個不帶引號的字符串,其值為"a-1"。唯一的例外是單位;Sass 通常允許任何有效的標識符被用作一個標識符,但標識符不可能以數字或連字符開始。這意味著,5px-3px5px - 3px是相同。

  2. - 在不帶空格兩個數字之間。這表明是減法,所以1-21 - 2 是相同的。

  3. 字面數字以 - 開頭。這表明是一個負數,所以 1 -2是一個含有1-2的 list(列表)。

  4. - 兩個數字之間,不論是否帶空格。這表明是減法,所以 1 -$var1 - $var 是相同的。

  5. - 在值之前。這表明是一元負運算符;該操作需要一個數字,并返回其負值。

顏色運算 (Color Operations)

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

p {
  color: #010203 + #040506;
} 

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

p {
  color: #050709; } 

通常color functions(顏色函數)比嘗試使用顏色運算更加有用,以達到同樣的效果。

數字和顏色值之間的算術運算也是分段。例如:

p {
  color: #010203 * 2;
} 

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

p {
  color: #020406; } 

需要注意的是,包含alpha通道(那些由rgbahsla函數創建的)的顏色必須具有相同的alpha值,才能進行顏色運算。這樣算術不會影響alpha值。例如:

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

編譯為:

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

顏色的alpha通道可以使用opacifytransparentize函數進行調整。例如:

$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 函數可以輕松的將顏色轉化為 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; } 

請注意,如果帶引號的字符串被添加到不帶引號的字符串中(也就是說,帶引號的字符串在 + 的左側),
那么返回的結果是帶引號的字符串。同樣,如果一個不帶引號的字符串添加到帶引號的字符串中(不帶引號的字符串在 + 的左側)那么返回的結果是一個不帶引號的字符串。 例如:

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; } 

在文本字符串中,#{}式插值可以用來在字符串中放置動態值:

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)

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

列表運算 (List Operations)

數組不支持任何特殊運算,只能使用 list 函數 控制。

圓括號 (Parentheses)

圓括號可以用來影響運算的順序(手冊網注:優先級):

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

編譯為:

p {
  width: 7em; } 

函數 (Functions)

SassScript定義了一些有用的函數, 這些函數可以像普通 CSS 函數語法一樣調用:

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

編譯為:

p {
  color: #ff0000; } 

可用函數的完整列表,請參閱這張頁面

關鍵詞參數 (Keyword Arguments)

Sass 函數允許指定明確的關鍵詞參數 (keyword arguments) 進行調用。 上面的例子也可以改寫成:

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

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

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

完整的 Sass 函數列表和它們的參數名稱,以及在 Ruby 里如何定義你自己的函數的步驟,請見 Sass::Script::Functions

插值:#{}(Interpolation: #{}

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

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

編譯為:

p.foo {
  border-color: blue; } 

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

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

編譯為:

p {
  font: 12px/30px; } 

SassScript中的&& in SassScript)

就像當它在選擇器中使用一樣,SassScript中的&指向當前父選擇器。下面是一個逗號分隔的列表(list)中包含一個空格的分隔列表(list)。例如:

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

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

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

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

變量默認: !default (Variable Defaults: !default

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

例如:

$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值為 "Non-null content"):

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

#main {
  content: $content;
} 

編譯為:

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

@規則 和 指令 (@-Rules and Directives)

Sass 支持所有CSS3的 @規則,以及一些已知的其他特定的Sass "指令"。這些在 Sass 都有對應的效果,更多資料請查看 控制指令 (control directives)混入指令 (mixin directives)

@import

Sass 擴展了 CSS @import規則,允許其導入 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 規則語句,不會導入任何 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 規則中同時導入多個文件。例如:

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

將同時導入rounded-cornerstext-shadow 這兩個文件。

導入規則中可能含有#{} 插值,但存在一定的限制。不能通過變量動態導入Sass文件;#{}插值僅適用于CSS導入規則。 因此,它僅適用于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.scsscolors.scss 不能同時存在于同一個目錄下。否則帶下劃線的文件將會被忽略。

嵌套 @import(Nested @import

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

舉個例子,如果 example.scss 包含

.example {
  color: red;
} 

然后(手冊網注:導入到 #main 樣式內)

#main {
  @import "example";
} 

手冊網注:這樣導入后等同于:

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

將被編譯為

#main .example {
  color: red;
} 

該指令只允許出現在文檔頂層(手冊網注:最外層,不在嵌套規則內),像@mixin 或者 @charset,在文件中,不允許被@import導入到一個嵌套上下文中。

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

@media

Sass 中 @media 指令的行為和純 CSS 中一樣,只是增加了一點額外的功能:它們可以嵌套在CSS規則。如果一個@media 指令出現在CSS規則中,它將被冒泡到樣式表的頂層,并且包含規則內所有的選擇器。這使得很容易地添加特定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 操作符號結合。例如:

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

編譯為:

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

@media 甚至可以使用 SassScript(比如變量,函數,以及運算符)代替條件的名稱或者值:

最后,@media 查詢(queries)可以包含 SassScript 表達式(包括變量 variables,函數 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

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

<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 規則也會同樣繼承給.seriousError,例如,如果我們有特殊錯誤樣式的hack:

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

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

它是如何工作的(How it Works)

@extend通過在樣式表中出現被擴展選擇器(例如.error)的地方插入擴展選擇器(例如.seriousError)。比如上面的例子:

.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 會很聰明地避免不必要的重復,所以像.seriousError.seriousError 將轉換為 .seriousError,此外,她不會生成不能匹配任何元素的選擇器(比如 #main#footer )。

擴展復雜的選擇器(Extending Complex Selectors)

Class 選擇器并不是唯一可以被延伸 (extend) 的,Sass 允許延伸任何定義給單個元素的選擇器,比如 .special.cool,a:hover 或者 a.user[href^="http://"] 等,例如:

類(class)選擇,并不是唯一可以擴展。她可以擴展任何定義給單個元素的選擇器,如.special.cool, a:hover, 或 a.user[href^="http://"]。 例如:

.hoverlink {
  @extend a:hover;
} 

同帶 class 元素一樣,這意味著,a:hover定義的樣式同樣也適用于.hoverlink。例如:

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

編譯為:

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

與上面 .error.intrusion 的例子一樣, a:hover 中所有的樣式將繼承給 .hoverlink,甚至包括其他使用到她的樣式,例如:

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

編譯為:

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

多重擴展 (Multiple Extends)

同一個選擇器可以擴展多個選擇器。這意味著,它繼承了被擴展選擇器的所有樣式。例如:

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

編譯為:

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

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

.seriousError {
  border-width: 3px; } 

每個帶.seriousError類的元素也有.error類和.attention類。
因此,定義在文檔后面的樣式優先級高于定義在文檔前面的樣式:.seriousError的背景顏色是#ff0,而非#fdd,因為 .attention 是在 .error 后面定義。

多重擴展也可以用逗號分隔的選擇器列表(list)寫入。例如,@extend .error, .attention等同于@extend .error; @extend .attention

鏈式擴展(Chaining Extends)

一個選擇器可以擴展另一個選擇器,另一個選擇器又擴展的第三選擇器選擇。 例如:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
} 

現在,帶 .seriousError 類的每個元素將包含 .error 類,而帶 .criticalError 類的每個元素不僅包含 .criticalError類也會同時包含 .error 類,上面的代碼編譯為:

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

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; } 

選擇器序列 (Selector Sequences)

選擇器序列,比如.foo .bar.foo + .bar,目前還不能作為擴展。但是,選擇器序列本身可以使用@extend。例如:

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
} 

將被編譯為:

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; } 
合并選擇器序列 (Merging Selector Sequences)

有時,選擇器序列擴展另一個選擇器,這個選擇器出現在另一選擇器序列中。在這種情況下,這兩個選擇器序列需要合并。例如:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
} 

技術上講能夠生成所有匹配條件的結果,但是這樣生成的樣式表太復雜了,上面這個簡單的例子就可能有 10 種結果。所以,Sass 只會編譯輸出有用的選擇器。

當兩個列 (sequence) 合并時,如果沒有包含相同的選擇器,將生成兩個新選擇器:第一列出現在第二列之前,或者第二列出現在第一列之前。例如:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
} 

編譯為:

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; } 

如果兩個列 (sequence) 包含了相同的選擇器,相同部分將會合并在一起,其他部分交替輸出。在下面的例子里,兩個列都包含 #admin,輸出結果中它們合并在了一起:

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
} 

編譯為:

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; } 

@extend-Only 選擇器 (@extend-Only Selectors)

有時候你只會想寫一個 @extend 擴展樣式類,不想直接在你的HTML中使用。在寫一個 Sass 樣式庫時,這是特別有用,如果他們需要,在這里你可以提供 @extend 擴展樣式給用戶,如果他們不需要,直接被忽視。

對于這種情況,如果使用普通的樣式類,在你你最終生成的樣式表中,會有很多額外(手冊網注:無用)的CSS,并且在HTML被使用時,和其他樣式類結合的時候容易造成沖突。這就是 Sass 為什么支持"占位選擇器"的原因(例如,%foo)。

占位選擇器看起來很像普通的 class 和 id 選擇器,只是 #. 被替換成了 %。他可以像 class 或者 id 選擇器那樣使用,而它本身的規則,不會被編譯到 CSS 文件中。例如:

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
} 

占位符選擇器,就像class和id選擇器那樣可以用于擴展。擴展選擇器,將會編譯成CSS,占位符選擇器本身不會被編譯。例如:

.notice {
  @extend %extreme;
} 

編譯為:

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

!optional 標記(The !optional Flag)

通常,當你擴展一個選擇器的時候,如果說@extend不起作用了,你會收到一個錯誤提示。
例如,如果沒有 .notice 選擇器,你這么寫a.important {@extend .notice},將會報錯。如果只有h1.notice一個選擇器包含了.notice,那么也會報錯。因為 h1 會與 a 沖突,并且不會生成新的選擇器。

然而,有時候,要想@extend不生成任何新的選擇器。只是在選擇器后添加 !optional標志就可以了。例如:

a.important {
  @extend .notice !optional;
} 

指令中的@extend (@extend in Directives)

在指令中使用 @extend 時(比如在@media 中)存在一些限制:Sass 不可以將 @media 層外的 CSS 規則擴展給指令層內的 CSS,這樣會生成大量的無用代碼。意思是說,如果在 @media (或者其他 CSS 指令)中使用@extend,必須擴展給相同指令層中的選擇器。

下面的例子是可行的:

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

但下面這個例子會報錯:

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

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
} 

希望有一天,瀏覽器可以原生支持 @extend 指令,這樣就可以在@media和其他指令中使用擴展功能了。

@at-root

@at-root指令導致一個或多個規則被限定輸出在文檔的根層級上,而不是被嵌套在其父選擇器下。
它可以被用于單一或內聯選擇器:

.parent {
  ...
  @at-root .child { ... }
} 

這將生成:

.parent { ... }
.child { ... } 

或者它可以用于包含多個選擇器的代碼塊:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
} 

這將輸出如下:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... } 

@at-root (without: ...)@at-root (with: ...)@at-root (without: ...) and `@at-root (with: ...))

默認情況下, @at-root只是排除了選擇器。然而,它也可以使用@at-root將選擇器移動到嵌套指令(比如@media)之外。例如:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
} 

生成:

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
} 

您可以使用@at-root (without: ...) 將規則移動到任何指令之外。你同樣可以讓多個指令做到這一點,只要多個指令使用空格分隔就可以了:@at-root (without: media supports)會將規則移動到@media@supports查詢(queries)之外。

還有有兩個特殊值你可以傳遞給@at-root。"rule"是指正常的CSS規則;@at-root (without: rule)等價于沒有查詢的@at-root@at-root (without: all) 意思是該樣式應該移動到全部的指令和CSS規則之外。

如果你想指定哪個指令或規則包含,而不是哪些應該排除,那么,你可以使用with代替without
例如,@at-root (with: rule)將規則移動到所有指令之外,但在CSS規則內會保留。

@debug

@debug指令打印SassScript表達式的值到標準的錯誤輸出流。這對于調試具有復雜SassScript 表達式的Sass文件非常有用的。 例如:

@debug 10em + 12em; 

輸出:

Line 1 DEBUG: 22em 

@warn

@warn指令打印SassScript表達式的值到標準的錯誤輸出流。這對于警告用戶棄用庫 或 修復 mixin 輕微的錯誤是非常有用的。@warn@debug之間有兩個主要區別:

  1. 您可以使用--quiet命令行選項或:quiet Sass選項關閉警告。
  2. 樣式表跟蹤將與消息一起被打印出來,這樣,用戶可以看到他們的樣式在哪里引起了警告。

用法示例:

@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

@error指令拋出一個SassScript表達式的值作為一個致命的錯誤,其中包括一個不錯的堆棧跟蹤。這對于驗證混入(mixin)和函數的參數很有用。例如:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
        @error "$x may not be unitless, was #{$x}.";
      }
      @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
      }
      position: relative; left: $x; top: $y;
} 

目前還沒有辦法捕獲錯誤。

控制指令和表達式(Control Directives & Expressions)

SassScript支持一些基本控制指令和表達式,比如僅在在某些條件下包含樣式,或者包括相同的樣式幾次變化。

注意: 控制指令是一項高級功能,日常編寫過程中并不常用到,主要在 mixins(混合)指令中使用,尤其是像Compass這樣的庫。

if()

內置的if()函數可讓您在一個條件處理分支并返回兩種可能結果。它可以在任何腳本上下文中使用。if函數只判斷相對應的一個參數并且返回 -- 這使您可以引用已經定義的或者可以計算的變量,否則將導致錯誤(例如,除以零)。

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

@if

@if 指令需要一個SassScript表達和嵌套在它下面要使用的樣式,如果表達式返回值不為 false 或者 null ,那么后面花括號中的內容就會返回:

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
} 

編譯為:

p {
  border: 1px solid; } 

@if 語句后面可以跟多個@else if語句和一個 @else 語句。
 如果@if語句失敗,Sass 將逐條嘗試@else if 語句,直到有一個成功,或如果全部失敗,那么會執行@else語句。 例如:

$type: monster;
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
} 

編譯為:

p {
  color: green; } 

@for

@for指令重復輸出一組樣式。對于每次重復,計數器變量用于調整輸出結果。該指令有兩種形式:@for $var from <start> through <end>@for $var from <start> to <end>。注意關鍵字throughto的區別。$var可以是任何變量名,比如$i;<start><end>是應該返回整數的SassScript表達式。當<start><end>大的時候,計數器將遞減,而不是增量。

@for語句將設置$var為指定的范圍內每個連續的數值,并且每一次輸出的嵌套樣式中使用$var的值。對于from ... through的形式,范圍包括<start><end>的值,但from ... to的形式從<start>開始運行,但不包括<end>的值。使用through語法,

@for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
} 

編譯為:

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; } 

@each

@each指令通常格式是@each $var in <list or map>$var可以是任何變量名,像$length 或者 $name,和<list or map>是一個返回列表(list)或 map 的 SassScript 表達式。

@each 規則將$var設置為列表(list)或 map 中的每個項目,輸出樣式中包含使用$var的值。 例如:

@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
  }
} 

編譯為:

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); } 

多重賦值(Multiple Assignment)

@each指令也可以使用多個變量,格式為@each $var1,$var2, ... in <list>。如果<list>是列表(list)中的列表,子列表中的每個元素被分配給各自的變量。例如:

@each $animal, $color, $cursor in (puma, black, default),
                                      (sea-slug, blue, pointer),
                                      (egret, white, move) {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
  }
} 

編譯為:

.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; } 

因為maps被視為鍵值對的列表,所以多重賦值也可以很好的工作。例如:

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
        font-size: $size;
  }
} 

編譯為:

h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; } 

@while

@while 指令重復輸出嵌套樣式,直到SassScript表達式返回結果為false。這可用于實現比@for語句更復雜的循環,只是很少會用到例如:

$i: 6;
    @while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
} 

編譯為:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; } 

混入指令 (Mixin Directives)

混入(mixin)允許您定義可以在整個樣式表中重復使用的樣式,而避免了使用無語意的類(class),比如 .float-left。混入(mixin)還可以包含所有的CSS規則,以及任何其他在Sass文檔中被允許使用的東西。
他們甚至可以帶arguments,引入變量,只需少量的混入(mixin)代碼就能輸出多樣化的樣式。

定義一個混入(mixin):@mixin(Defining a Mixin: @mixin

混入(mixin)通過 @mixin 指令定義。在它后面跟混入的名稱和任選的arguments(參數),以及混入的內容塊。例如,large-text混入定義如下:

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
} 

混入也可以包含選擇器和屬性的混合體,選擇器中甚至可以包含parent references(父選擇器)。 例如:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
} 

由于歷史原因,混入(mixin)的名字(和所有其他 Sass 標識符)可以互換連字符和下劃線。例如,如果你定義了一個名為add-column的混入,你可以把它作為add_column,反之亦然。

引用混合樣式:@include (Including a Mixin: @include

使用 @include 指令可以將混入(mixin)引入到文檔中。這需要一個混入的名稱和可選的參數傳遞給它,并包括由混入定義的當前規則的樣式。 例如:

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
} 

編譯為:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; } 

混入(mixin)也可以包含在任何規則的外(即,在文檔的根),只要它們不直接定義的任何屬性或使用任何父選擇器引用。例如:

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links; 

編譯為:

a {
  color: blue;
  background-color: red; } 

混入(mixin)定義也可以包含其他的混入。例如:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; } 

混入可以包含自己。這行為不同于 Sass 3.3 之前的版本,以前混入遞歸是被禁止的。

只定義后代選擇器的混入可以安全地混入到文件的最頂層。

參數 (Arguments)

混入(mixin)可以用 SassScript 值作為參數,給定的參數被包括在混入(mixin)中并且作為為變量提供給混入(mixin)。

當定義一個混入(mixin)的時候,參數被作為變量名,寫到混入(mixin)名字后面的括號內,多個參數可以用逗號分隔。然后,當調用混入的時候,值通過對應的參數順序被傳遞。 例如:

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); } 

編譯為:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; } 

混入(mixin)也可以使用普通的變量賦值語法為參數指定默認值。然后,當調用混入的時候,如果沒有給參數賦值,則自動會使用默認值代替。 例如:

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); } 

編譯為:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; } 

關鍵字參數 (Keyword Arguments)

混入(mixin)在引入(@include指令)的時候也可以使用明確的關鍵字參數。例如,上面的例子可以寫成:

p { @include sexy-border($color: blue); }
    h1 { @include sexy-border($color: blue, $width: 2in); } 

雖然這是不夠簡明,但是它可以使樣式表更容易閱讀。它給函數呈現了更加靈活的接口,它使多參數的混入更加容易調用。

命名的參數可以按任何順序進行傳遞,有默認值的參數可以省略。由于命名參數是變量名,下劃線和連字符可以互換使用。

可變參數 (Variable Arguments)

有時,不能確定一個混入(mixin)或者一個函數(function)使用多少個參數。例如,用于創建盒子陰影(box-shadow)的一個混入(mixin)可以采取任何數量的box-shadow作為參數。對于這些情況,Sass支持"可變參數",參數在聲明混入(mixin)或函數(function)結束的地方,所有剩余的參數打包成一個列表(list)。參數看起來就像普通參數一樣,但后面跟隨著...。例如:

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
} 

編譯為:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
} 

可變參數可以包含任何關鍵字參數傳遞給混入(mixin)或者函數(function)。這些可以使用keywords($args)函數 來訪問,返回一個map,參數名稱字符串(無$)和值的鍵值對。

可變參數,也可以在調用(@include指令)一個混入(mixin)時使用。使用相同的語法,你可以擴展值的列表(list),以便每個值作為單獨的參數傳入,或擴展值的map,以使每個鍵值對作為一個關鍵字參數處理。例如:

@mixin colors($text, $background, $border) {
      color: $text;
      background-color: $background;
      border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
    .primary {
      @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
    .secondary {
      @include colors($value-map...);
} 

編譯為:

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
} 

你可以同時傳遞一個列表(list)和一個map參數,只要列表(list)在map上之前,比如@include colors($values..., $map...)

您可以使用可變參數來包裝一個混入(mixin)并且添加額外的樣式,而不改變混入(mixin)的參數簽名。如果你這樣做,關鍵字參數將通過包裝的混入(mixin)直接傳遞。例如:

@mixin wrapped-stylish-mixin($args...) {
      font-weight: bold;
      @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
      @include wrapped-stylish-mixin(#00ff00, $width: 100px);
} 

傳遞內容塊到混入(Passing Content Blocks to a Mixin)

樣式內容塊可以傳遞到混入(mixin)包含樣式的位置。樣式內容塊將出現在混入內的任何 @content 指令的位置。這使得可以定義抽象 關聯到選擇器和指令的解析。

例如:

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
} 

生成:

* html #logo {
  background-image: url(/logo.gif);
} 

同樣的混入(mixin)可以在.sass 簡寫語法(@mixin 可以用 = 表示,而 @include 可以用 + 表示)來完成:

=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif) 

注意:@content指令指定多次或在一個循環中指定的時候,樣式塊將在每次調用中被復制并引用。

變量的作用域和內容塊(Variable Scope and Content Blocks)

傳遞給混入(mixin)的內容塊在其被定義的作用域中進行運算,而不是混入(mixin)的作用域。這意味著混入(mixin)的局部變量不能傳遞給樣式塊使用,并且變量將解析為全局值:

$color: white;
    @mixin colors($color: blue) {
  background-color: $color;
      @content;
      border-color: $color;
}
.colors {
  @include colors { color: $color; }
} 

編譯為:

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
} 

另外,這清楚地表明,變量和傳遞到塊中使用的混入,指向塊定義的周圍其他樣式。例如:

#sidebar {
  $sidebar-width: 300px;
      width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
} 

函數指令 (Function Directives)

Sass 支持自定義函數,并能在任何值或腳本上下文中使用。例如

$grid-width: 40px;
    $gutter-width: 10px;

@function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); } 

就變成了:

#sidebar {
  width: 240px; } 

正如你看到的,函數可以訪問任何全局定義的變量,以及接受參數,就像一個混入(mixin)。函數可以包含語句,并且你必須調用@return來設置函數的返回值。

與混入(mixin)一樣,你可以使用關鍵字參數來調用Sass定義的函數。在上面的例子中,我們可以這樣調用函數:

#sidebar { width: grid-width($n: 5); } 

建議您在函數前加上前綴,以避免命名沖突,其他人閱讀樣式表的時候也會知道它們不是 Sass 或者 CSS 的自帶功能。例如,如果您在ACME公司工作,你可以給上面的函數取名為-acme-grid-width

用戶自定義的函數也支持可變參數,方式和混入(mixin)是相同的。

由于歷史的原因,函數名(和所有其他Sass標識符)中連字符和下劃線可以互換。例如,如果你定義了一個名為grid-width的函數,你可以通過grid_width調用它,反之亦然。

輸出格式 (Output Style)

雖然Sass 默認的 CSS 輸出格式非常好,并且能反映文檔的結構,但是由于每個人的喜好和需求各不相同,因此Sass 支持其他幾種格式。

Sass 提供了四種輸出格式,可以通過:style 選項 選項設定,或者在命令行中使用 --style 選項。

Sass 允許您通過設置:style 選項 或使用 --style 命令行標志,在四種不同的輸出格式之間進行選擇。

:nested

nested(嵌套)格式是 Sass 默認的輸出格式,因為它的格式反映CSS樣式與HTML文檔結構。每個屬性都獨占用一行,但縮排不是固定的。每個規則是基于它的何嵌套深度縮進。例如:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; } 

當閱讀大型 CSS 文件時,nested(嵌套)格式是非常有用的:不用詳細閱讀,就可以讓你輕松掌握文件的結構。

:expanded

expanded(擴展)格式更像是手寫的CSS樣式,每個屬性和規則都獨占用一行。在規則之內的屬性縮進的,但規則沒有任何特殊的縮進。例如:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
} 

:compact

compact(緊湊)格式比起nested(嵌套)或expanded(擴展)格式占據更小的空間。這種格式重點聚焦在選擇器上,不是它們的屬性。每個CSS規則獨占用一行,該行還包括定義的每個屬性。嵌套的規則都是另起一行,不嵌套的選擇器會輸出空白行作為分隔符。 例如:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; } 

:compressed

compressed(壓縮)格式占用盡可能小的空間,在該文件的末尾會有一個換行,并且除了必要的分隔選擇器之外,基本沒有多余空格,它還包括其他一些小的壓縮,比如選擇顏色最小的表示方式。這意味著可讀性很差。 例如:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline} 

擴展 Sass (Extending Sass)

對于獨特的需求,Sass為用戶提供了多項高級定制功能。使用這些功能需要對Ruby有深刻的理解。

自定義 Sass 函數 (Defining Custom Sass Functions)

用戶通過 Ruby API 可以自定義 Sass 函數,更多信息請查看 源代碼文檔

緩存存儲(Cache Stores)

Sass會緩存已經解析的文檔,這使得它們可以重復使用,而無需再次解析,除非他們已經被更改。 默認情況下,Sass會將這些緩存文件寫到 :cache_location指定的文件系統中。如果你不能寫入文件系統或者需要ruby進程或計算機共享緩存,那么你可以定義自己的緩存存儲,并設置:cache_store選項。有關創建自定義緩存存儲的詳細信息,請查看源代碼文檔

自定義導入 (Custom Importers)

Sass導入主要負責獲取路徑傳遞給@import并找到這些路徑相應的Sass代碼。默認情況下,這些代碼是從文件系統中加載,但是Importers可以從數據庫加載,通過HTTP,或者使用不同的文件命名方案,被添加到Sass。

每個importer負責一個單獨的加載路徑(或任何相應的后端概念)。importer可以和普通的文件系統路徑一起放置在:load_paths數組中。

當解析一個@import的時候,Sass將通過加載路徑尋找importer來成功地導入路徑。一旦被發現,該導入的文件就會被使用。

用戶創建的導入必須繼承自 Sass::Importers::Base

股票配资平台l选一直牛