使用 Sass

上一頁
下一頁

SASS 比 CSS 更強大、更穩定，透過擴充套件 CSS 來增強基本語言的功能。您可以透過三種不同的方式使用 SASS：

  • 作為命令列工具
  • 作為 Ruby 模組
  • 作為啟用 Rack 框架的外掛

如果您在 Windows 上使用 SASS，則需要先安裝Ruby。有關安裝 Ruby 的更多資訊，請參閱SASS 安裝章節。

下表顯示了用於執行 SASS 程式碼的命令：

序號 命令和說明
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 應用程式。有關 Rack 的資訊，只需訪問此連結。

您可以使用config資料夾下的environment.rb檔案，在Rails 3版本中啟用 SASS。使用以下程式碼為 Rails 3 啟用 SASS：

config.gem "sass"

您可以將以下行新增到 Rails 3（及以上版本）的 Gemfile 中，如下所示：

gem "sass"

Rails是一個開源的 Web 框架，它使用 Web 標準（例如 JSON、HTML、CSS 和 JavaScript）來顯示使用者介面。要使用 Rails，您需要具備 Ruby 和麵向物件程式設計的基礎知識。在此處瞭解更多關於 Rails 框架的資訊這裡。

如果您想在Rack應用程式中啟用 SASS，請將以下幾行新增到應用程式根目錄中的config.ru檔案中：

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

Merb是一個 Web 應用程式框架，它為 Rails 提供速度和模組化。要了解更多關於 Merb 的資訊，只需開啟此連結。

您可以透過將以下行新增到config/dependencies.rb檔案中來在Merb中啟用 SASS：

dependency "merb-haml"

快取

SASS 快取文件（例如模板和區域性檔案），這些文件可以重複使用，無需解析，除非它們已更改。這使得 SASS 檔案的編譯速度更快，並且當模板被分成單獨的檔案（所有這些檔案都匯入到一個大型檔案中）時，效果更好。如果您刪除快取檔案，它們將在下次編譯時重新生成。

選項

您可以使用以下行在 Rails 的environment.rb檔案或 Rack 應用程式的config.ru檔案中設定選項：

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

您也可以使用以下行在 Merb 的init.rb檔案中設定選項：

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

SASS和SCSS有一些可用的選項，如下表所示：

序號 選項和說明
1

:style

它顯示輸出的樣式。
2

:syntax

您可以對sass使用縮排語法，對scss使用 CSS 擴充套件語法。
3

:property_syntax

它使用縮排語法來使用屬性。如果它不正確，則會丟擲錯誤。例如，考慮 "background: #F5F5F5"，其中background是屬性名稱，#F5F5F5是其屬性值。您必須在屬性名稱後使用冒號。
4

:cache

它加快了 SASS 檔案的編譯速度。預設設定為 true。
5

:read_cache

如果未設定cache並且設定了read_cache，則它只讀取 SASS 檔案。
6

:cache_store

它可以透過將其設定為Sass::CacheStores::Base的例項來儲存和訪問快取的結果。
7

:never_update

如果模板檔案更改，則它永遠不會更新 CSS 檔案。預設設定為 false。
8

:always_update

只要模板檔案更改，它就會更新 CSS 檔案。
9

:always_check

伺服器啟動時，它應該檢查更新。如果 SASS 模板檔案有更新，它將重新編譯並覆蓋 CSS 檔案。
10

:poll

透過將其設定為 true，它對Sass::Plugin::Compiler#watch（監視模板和 CSS 檔案的更新）使用輪詢後端。
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::Base子類來處理字串載入路徑。
19

:sourcemap

它生成源對映，指示瀏覽器查詢 SASS 樣式。它使用三個值：

  • :auto - 它包含相對 URI。如果沒有相對 URI，則使用“file:” URI。

  • :file - 它使用“file:” URI，可在本地工作，不能在遠端伺服器上工作。

  • :inline - 它在源對映中包含源文字，用於建立大型源對映檔案。
20

:line_numbers

透過將其設定為 true，它顯示 CSS 檔案中報告的錯誤的行號。
21

:trace_selectors

當它設定為 true 時，它有助於跟蹤匯入和 mixin 的選擇器。
22

:debug_info

當它設定為 true 時，它使用行號和檔案提供 SASS 檔案的除錯資訊。
23

:custom

它使資料可在單獨的應用程式中用於 SASS 函式。
24

:quiet

透過將其設定為 true，它停用警告。

語法選擇

您可以使用 SASS 命令列工具確定在 SASS 模板中使用哪種語法。預設情況下，SASS 使用縮排語法，這是一種基於 CSS 的 SCSS 語法的替代方法。您可以使用 SCSS 命令列程式，它類似於 SASS 程式，但預設情況下，它認為語法是 SCSS。

編碼

SASS 透過指定以下 CSS 規範來使用樣式表的字元編碼：

  • 首先，它檢查 Unicode 位元組，然後檢查@charset宣告，然後檢查 Ruby 字串編碼。

  • 接下來，如果沒有設定任何內容，則它將字元集編碼視為UTF-8。

  • 使用@charset宣告顯式確定字元編碼。只需在樣式表的開頭使用“@charset 編碼名稱”，SASS 將假定這是給定的字元編碼。

  • 如果 SASS 的輸出檔案包含非 ASCII 字元，則它將使用@charset宣告。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.