使用 Sass
SASS是更強(qiáng)大和穩(wěn)定，通過(guò)使用CSS的擴(kuò)展提供基本語(yǔ)言的力量。您可以使用三種不同的方式使用SASS:
作為命令行工具
作為一個(gè)Ruby模塊
作為Rack啟用框架的插件
如果您在Windows上使用SASS，則需要先安裝 Ruby 。 有關(guān)安裝Ruby的更多信息，請(qǐng)參閱 SASS安裝一章。
下表顯示了用于執(zhí)行SASS代碼的命令:
| 序號(hào) | 命令和描述 |
| 1 | sass input.scss output.css 它用于從命令行運(yùn)行SASS代碼。 |
| 2 | sass --watch input.scss:output.css 當(dāng)SASS文件更改時(shí)，它通知SASS監(jiān)視文件并更新CSS。 |
| 3 | sass --watch app / sass:public / stylesheets 它用于觀察整個(gè)目錄，如果SASS在一個(gè)目錄中包含許多文件。 |
Rack / Rails / Merb插件
Rack 是一個(gè)Web服務(wù)器接口，用于在Ruby中開發(fā)Web應(yīng)用程序。 有關(guān)Rack的信息，請(qǐng)?jiān)L問(wèn)此鏈接。
您可以使用 config 文件夾下的 environment.rb 文件啟用 Rails 3 版本中的SASS。使用以下行為Rails 3啟用SASS:
config.gem "sass"
您可以使用以下行到Rails 3（和以上版本）的Gemfile，如下所示:
gem "sass"
Rails 是一個(gè)開放源代碼的Web框架，它使用JSON，HTML，CSS和JavaScript等Web標(biāo)準(zhǔn)來(lái)顯示用戶界面。 要使用Rails，您需要具有Ruby和面向?qū)ο缶幊痰幕局R(shí)。在這里了解更多關(guān)于Rails框架。
如果您要在 Rack 應(yīng)用程序中啟用SASS，請(qǐng)將以下行添加到應(yīng)用程序根目錄中的 config.ru 文件中:
require 'sass/plugin/rack' use Sass::Plugin::Rack
Merb 是一個(gè)Web應(yīng)用程序框架，可為Rails提供速度和模塊化。 要了解有關(guān)Merb的更多信息，只需打開此鏈接 。
您可以在 Merb 中啟用SASS，方法是在 config / dependencies.rb 文件中添加以下行:
dependency "merb-haml"
緩存
SASS緩存諸如模板和分支的文檔，可以重用它們而不解析它們，除非它們已經(jīng)改變。它使得SASS文件的編譯更快，并且當(dāng)模板被分割成單獨(dú)的文件并且被導(dǎo)入到一個(gè)大文件中時(shí)，工作更好。如果您刪除緩存的文件，它們將在下次編譯時(shí)再次生成。
選項(xiàng)
您可以在Rack應(yīng)用程序的Rails或 config.ru 文件的 environment.rb 文件中設(shè)置選項(xiàng)，方法如下:
Sass::Plugin.options[:style] = :compact
您還可以使用以下行在Merb的 init.rb 文件中設(shè)置選項(xiàng):
Merb::Plugin.config[:sass][:style] = :compact
有一些選項(xiàng)可用于 SASS 和 SCSS ，如下表所述:
| 序號(hào) | 選項(xiàng)和描述 |
|---|---|
| 1 | :style 它顯示輸出的樣式。 |
| 2 | :語(yǔ)法 您可以為 sass 使用縮進(jìn)語(yǔ)法，并為 scss 使用CSS擴(kuò)展語(yǔ)法。 |
| 3 | :property_syntax 它使用縮進(jìn)語(yǔ)法來(lái)使用屬性。 如果它不正確，那么它會(huì)拋出一個(gè)錯(cuò)誤。 例如，考慮“background:＃F5F5F5"，其中背景是屬性名稱，＃F5F5F5 是其屬性值。 您必須在屬性名稱后面使用冒號(hào)。 |
| 4 | :緩存 它加速了SASS文件的編譯。 默認(rèn)情況下，它設(shè)置為true。 |
| 5 | :read_cache 如果未設(shè)置 cache 并且已設(shè)置 read_cache ，則只讀取SASS文件。 |
| 6 | :cache_store 它可以用于存儲(chǔ)和訪問(wèn)緩存的結(jié)果，方法是將其設(shè)置為 Sass :: CacheStores :: Base 的實(shí)例。 |
| 7 | :never_update 如果模板文件更改，它不應(yīng)該更新CSS文件。 默認(rèn)情況下，它設(shè)置為false。 |
| 8 | :always_update 每當(dāng)模板文件更改時(shí)，它應(yīng)該更新CSS文件。 |
| 9 | :always_check 它應(yīng)該在服務(wù)器啟動(dòng)時(shí)檢查更新。 如果SASS模板文件中有更新，它將重新編譯和覆蓋CSS文件。 |
| 10 | :poll 它通過(guò)將 Sass :: Plugin :: Compiler＃watch（監(jiān)視模板和CSS文件的更新）的輪詢后端設(shè)置為true來(lái)使用輪詢后端。 |
| 11 | :full_exception 每當(dāng)在生成的CSS文件中的SASS代碼中發(fā)生異常時(shí)，它顯示錯(cuò)誤描述。 它在CSS文件中顯示與源一起發(fā)生錯(cuò)誤的行號(hào)。 |
| 12 | :template_location 它提供了應(yīng)用程序中模板目錄的路徑。 |
| 13 | :css_location 它提供了應(yīng)用程序中CSS樣式表的路徑。 |
| 14 | :unix_newlines 當(dāng)通過(guò)將文件設(shè)置為true來(lái)編寫文件時(shí)，它提供Unix樣式換行符。 |
| 15 | :filename 它是顯示的文件名，用于報(bào)告錯(cuò)誤。 |
| 16 | :行 它指定SASS模板的第一行并顯示錯(cuò)誤的行號(hào)。 |
| 17 | :load_paths 它用于加載使用 @import 指令包含的SASS模板的路徑。 |
| 18 | :filesystem_importer 它用于從使用 Sass :: Importers :: Base 子類的文件系統(tǒng)中導(dǎo)入文件來(lái)處理字符串加載路徑。 |
| 19 | :sourcemap 它生成指示瀏覽器找到SASS樣式的源映射。它使用三個(gè)值:
|
| 20 | :line_numbers 它顯示CSS文件中報(bào)告的錯(cuò)誤的行號(hào)，方法是將其設(shè)置為true。 |
| 21 | :trace_selectors 當(dāng)設(shè)置為true時(shí)，它有助于跟蹤導(dǎo)入和混合選擇器。 |
| 22 | :debug_info 它提供SASS文件的調(diào)試信息使用行號(hào)和文件時(shí)，它設(shè)置為true。 |
| 23 | :custom 它使數(shù)據(jù)可用于單獨(dú)應(yīng)用程序中的SASS函數(shù)。 |
| 24 | :quiet 它通過(guò)將警告設(shè)置為true來(lái)禁用警告。 |
語(yǔ)法選擇
您可以使用SASS命令行工具確定您在SASS模板中使用的語(yǔ)法。默認(rèn)情況下，SASS使用縮進(jìn)語(yǔ)法，它是基于CSS的SCSS語(yǔ)法的替代。您可以使用類似于SASS程序的SCSS命令行程序，但默認(rèn)情況下它認(rèn)為語(yǔ)法是SCSS。
編碼
SASS通過(guò)指定以下CSS規(guī)范使用樣式表的字符編碼:
首先它檢查Unicode字節(jié)，下一個(gè)@charset聲明，然后檢查Ruby字符串編碼。
接下來(lái)如果沒(méi)有設(shè)置，則認(rèn)為字符集編碼為UTF-8。
通過(guò)使用@charset聲明明確地確定字符編碼。只需在樣式表的開頭使用“@charset encoding name"，SASS將假設(shè)這是給定的字符編碼。
如果SASS的輸出文件包含非ASCII字符，那么它將使用@charset聲明。
更多建議：