SASS教學 » Sass的使用

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 宣告。