使用 Sass (Using Sass)

Web前端開(kāi)發(fā) ? 9年前掃碼分享

我是創(chuàng)始人李巖：很抱歉！給自己產(chǎn)品做個(gè)廣告，點(diǎn)擊進(jìn)來(lái)看看。

?翻譯自官方文檔： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

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

gem install sass

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

如果要在命令行中運(yùn)行 Sass ,只要使用

sass input.scss output.css

你還可以使用Sass命令來(lái)監(jiān)視某個(gè)Sass文件的改動(dòng)，并自動(dòng)編譯來(lái)更新 CSS ：

sass --watch input.scss:output.css

如果你的目錄里有很多 Sass 文件，你也可以使用Sass命令來(lái)監(jiān)視整個(gè)目錄：

sass --watch app/sass:public/stylesheets

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

在 Ruby 中使用 Sass 也非常容易，Sass gem 安裝完畢后，用它運(yùn)行 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"

對(duì)于 Rails 3，則是把這一行加到 Gemfile 中：

gem "sass"

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

dependency "merb-haml"

在 Rack 應(yīng)用中啟用 Sass，需要在 config.ru 文件中添加以下代碼：

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

Sass 樣式表跟視圖（views）的工作方式不同。它不包含任何動(dòng)態(tài)內(nèi)容，因此只需要在 Sass 文件更新時(shí)生成 CSS 即可。默認(rèn)情況下， .sass 和 .scss 文件是放在 public/stylesheets/sass 目錄下的（這可以通過(guò) :template_location 選項(xiàng)進(jìn)行配置）。然后，在需要的時(shí)候，它們會(huì)被編譯成相應(yīng)的 CSS 文件并被放到 public/stylesheets 目錄下。例如，public/stylesheets/sass/main.scss 文件將會(huì)被編譯為 public/stylesheets/main.css 文件。

緩存 (Caching)

默認(rèn)情況下，Sass 會(huì)自動(dòng)緩存編譯后的模板（template）與 partials ，這樣做能夠顯著提升重新編譯的速度，在處理 Sass 模板被切割為多個(gè)文件并通過(guò) @import 導(dǎo)入，形成一個(gè)大文件時(shí)效果尤其顯著。

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

配置選項(xiàng) (Options)

選項(xiàng)可以通過(guò)設(shè)置的 Sass::Plugin#options hash，具體設(shè)置在Rails中的 environment.rb 或者Rack中的 config.ru 的文件中：

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

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

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

或者通過(guò)傳遞一個(gè)選項(xiàng) (options) hash 給 Sass::Engine#initialize ，
所有相關(guān)的選項(xiàng)也可通過(guò)標(biāo)記在 sass 和 scss 命令行可執(zhí)行文件中使用。可用選項(xiàng)有：

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

語(yǔ)法選擇（Syntax Selection）

Sass命令行工具將使用文件擴(kuò)展名以確定你使用的是哪種語(yǔ)法，但并不總是一個(gè)文件名。 sass 命令行程序默認(rèn)為縮進(jìn)語(yǔ)法，但如果輸入應(yīng)該被解析為SCSS語(yǔ)法，你可以傳遞 --scss 選項(xiàng)給她。此外，你可以使用 scss 命令行程序，它和 sass 程序完全一樣，但是他的默認(rèn)語(yǔ)法為SCSS。

編碼格式 (Encodings)

在 Ruby 1.9 及以上環(huán)境中運(yùn)行 Sass 時(shí)，Sass 對(duì)文件的編碼格式比較敏感，首先會(huì)根據(jù) CSS spec 判斷樣式文件的編碼格式，如果失敗則檢測(cè) Ruby 字符串編碼。也就是說(shuō)，Sass 首先檢查 Unicode 字節(jié)順序標(biāo)記，然后是 @charset 聲明，最后是 Ruby 字符串編碼，假如都沒(méi)有檢測(cè)到，默認(rèn)使用 UTF-8 編碼。

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

默認(rèn)情況下，Sass 總會(huì)以UTF-8編碼輸出 CSS 文件。當(dāng)且僅當(dāng)輸出文件包含非ASCII字符時(shí)，才會(huì)在輸出文件中添加 @charset 聲明，在壓縮模式中，而在壓縮模式下 (compressed mode) 使用 UTF-8字節(jié)順序標(biāo)記代替 @charset 聲明語(yǔ)句。