Sass的使用

SASS更強大和更穩定,可提供強大基本語言使用來擴展CSS。可以以三種不同的方式使用SASS:
  • 作為一個命令行工具
  • 作為一個Ruby模組
  • 作為一個插件機架啟用框架

如果您在Windows上使用SASS,那麼需要先安裝Ruby。有關安裝Ruby的更多資訊,參考SASS安裝 章節。

下表顯示了用於執行SASS代碼的命令:
S.N.
命令和說明
1 sass input.scss output.css
用來運行命令行SASS代碼
2 sass --watch input.scss:output.css
它通知SASS監視檔,每當SASS檔更改時更新CSS
3 sass --watch app/sass:public/stylesheets
它用於監視整個目錄,如果SASS包含在目錄中許多檔

Rack/Rails/Merb插件

機架(Rack)是用於開發Web應用程式在Ruby中的Web伺服器介面。有關機架的資訊,訪問該鏈接:這裏 。

在Rails3版本可以使用config檔夾environment.rb檔。啟用Rails的3SASS使用下麵命令行:
config.gem "sass"
您可以使用以下行為Rails 3的Gemfile(及以上版本),如:
gem "sass"
Rails是使用Web標準,如用於的JSON,HTML,CSS和JavaScript到用戶介面的一個開源Web框架。要使用Rails來工作,需要有Ruby的基本知識和麵向對象編程。
如果要啟用機架應用SASS,添加以下行到config.ru檔,該檔存在於應用程式的根目錄下:
require 'sass/plugin/rack'
use Sass::Plugin::Rack
Merb是一個Web應用程式框架,它提供速度和模組化到Rails。
可以通過添加下麵一行到 config/dependencies.rb 檔中,使 SASS 在 Merb 中啟用:
dependency "merb-haml"

緩存

SASS緩存檔,如範本和泛音可以在不分析它們,除非它們已更改被重用。當範本被分成全都導入到一個大檔單獨的檔這使得SASS檔編譯更快,工作得甚至更好。如果刪除緩存檔,它們下一次生成時將被重新編譯。

選項

可以使用以下行在 environment.rb 或檔 config.ru 檔設置的 RailsRack 應用的選項:
Sass::Plugin.options[:style] = :compact
還可以通過使用下麵一行設置Merb的init.rb檔選項:
Merb::Plugin.config[:sass][:style] = :compact
有在如下表所述可用SASS和SCSS一些選項:
S.N.
選項和說明
1 :style
顯示輸出的樣式
2 :syntax
可以使用縮進語法SASS和CSS擴展語法
3 :property_syntax
屬性使用縮進語法。如果它不正確,那麼就會拋出一個錯誤。例如,考慮“background: #F5F5F5”,這裏是一個屬性名是background,而#F5F5F5是它的屬性值。在屬性名後,必須使用冒號。
4 :cache
加快了SASS檔的編譯。它默認設置為true
5 :read_cache
只讀SASS檔,如果緩存中沒有設置和 read_cache 設置
6 :cache_store
可以被用來存儲和通過將其設置到 Sass::CacheStores::Base 實例相應訪問高速緩存的結果
7 :never_update
不應該更新CSS檔,如果範本檔的變化。默認情況下它設置為 false
8 :always_update
每當範本檔有變化它會更新CSS檔
9 :always_check
應檢查每當伺服器啟動更新。它將重新編譯並覆蓋 CSS 檔,如果在 SASS 範本檔的更新
10 :poll
採用後端Sass::Plugin::Compiler#watch(範本和CSS檔更新)將其設置為true。
11 :full_exception
顯示每當一個例外SASS代碼生成 CSS 檔的錯誤描述。它顯示發生源代碼 CSS 檔的錯誤行號
12 :template_location
提供了應用程式的範本目錄的路徑
13 :css_location
提供了在應用程式中的CSS樣式表的路徑
14 :unix_newlines
通過將其設置為 true,寫入檔時提供 Unix 樣式的換行符
15 :filename
正在顯示和用於報告錯誤的檔案名的名稱
16 :line
指定SASS範本的第一線和顯示錯誤的行號
17 :load_paths
使用@import加載被包括指令的路徑SASS範本
18 :filesystem_importer
它是用來導入從Sass::Importers::Basesub類來處理字串加載路徑檔系統中的檔
19 :sourcemap
產生指示流覽器找到SASS樣式源代碼映射。它使用三個值:
  • :auto包含相對URI。如果沒有相對的URI,那麼使用“file:”URI

  • :file使用“file:”在本地工作,而不是遠程伺服器上的URI

  • :inline包含在用於sourcemap源文本創建大sourcemap檔

20 :line_numbers
顯示了通過將其設置為true來報告在CSS檔中的錯誤行號
21 :trace_selectors
當它被設置為true,它有助於追蹤導入和混入選擇器
22 :debug_info
它提供SASS檔的使用的行號和文件當它的調試資訊被設置為true
23 :custom
在不同的應用程式提供數據給SASS函數
24 :quiet
通過將其設置為true,禁用警告

語法選擇

您可以決定SASS範本,所使用的語法是使用SASS命令行工具。通過默認SASS使用縮進語法,這是一種替代基於SCSS的CSS語法。可以使用SCSS命令行程序,它類似於SASS程式,但默認情況下使用SCSS語法

編碼

SASS使用樣式表的字元編碼通過指定以下CSS規範:
  • 首先,它會檢查Unicode位元組,接下來@charset聲明,再進行Ruby字串編碼
  • 接下來如果沒有設置,則認為字元編碼為UTF-8
  • 通過使用@charset聲明明確字元編碼。只要使用“@charset編碼名稱”的樣式表開磁,SASS將認為這是按給定字元編碼。
  • 如果SASS輸出檔中包含非ASCII字元,那麼它將使用@charset 聲明。

上一篇: Sass語法 下一篇: Sass嵌套規則