使用 Sass (Using Sass)

Web前端開發 ? 9年前掃碼分享

我是創始人李巖：很抱歉！給自己產品做個廣告，點擊進來看看。

?翻譯自官方文檔： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#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 ，
所有相關的選項也可通過標記在 sass 和 scss 命令行可執行文件中使用。可用選項有：

選項	描述
: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_array ， Sass::Plugin#add_template_location ， Sass::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_paths 和 `SASS_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 聲明語句。