Sass 快速指南

上一頁
下一頁

Sass - 概述

什麼是 SASS？

SASS（Syntactically Awesome Stylesheet）是一種 CSS 預處理器，它有助於減少 CSS 中的重複並節省時間。它是一種更穩定、更強大的 CSS 擴充套件語言，可以清晰而結構化地描述文件的樣式。

它最初由Hampton Catlin設計，並由Natalie Weizenbaum於 2006 年開發。後來，Weizenbaum和Chris Eppstein使用其初始版本用 SassScript 擴充套件了 Sass。

為什麼要使用 SASS？

  • 它是一種預處理語言，它為 CSS 提供縮排語法（它自己的語法）。

  • 它提供了一些功能，這些功能用於建立樣式表，允許更有效地編寫程式碼，並且易於維護。

  • 它是 CSS 的超集，這意味著它包含 CSS 的所有功能，並且是一個開源預處理器，用Ruby編寫。

  • 它以比扁平 CSS 更好的結構化格式提供文件樣式。它使用可重用方法、邏輯語句和一些內建函式，例如顏色操作、數學和引數列表。

SASS 的特點

  • 它更穩定、更強大，並且與 CSS 版本相容。

  • 它是 CSS 的超集，基於 JavaScript。

  • 它被稱為 CSS 的語法糖，這意味著它使使用者更容易閱讀或更清晰地表達事物。

  • 它使用自己的語法並編譯成可讀的 CSS。

  • 您可以輕鬆地在更短的時間內用更少的程式碼編寫 CSS。

  • 它是一個開源預處理器，被解釋成 CSS。

SASS 的優點

  • 它允許在程式設計結構中編寫乾淨的 CSS。

  • 它有助於快速編寫 CSS。

  • 它是 CSS 的超集，可以幫助設計師和開發人員更有效、更快速地工作。

  • 由於 Sass 與所有版本的 CSS 相容，因此我們可以使用任何可用的 CSS 庫。

  • 可以使用巢狀語法和有用的函式，例如顏色操作、數學和其他值。

SASS 的缺點

  • 開發人員需要花費時間來學習此預處理器中存在的新功能。

  • 如果許多人在同一個站點上工作，則應使用相同的預處理器。有些人使用 Sass，有些人使用 CSS 直接編輯檔案。因此，在站點上工作變得困難。

  • 可能會失去瀏覽器內建元素檢查器的優勢。

Sass - 安裝

在本章中，我們將學習安裝 Ruby 的分步過程，Ruby 用於執行 SASS 檔案。

SASS 的系統要求

  • 作業系統 - 跨平臺

  • 瀏覽器支援 - IE（Internet Explorer 8+）、Firefox、Google Chrome、Safari、Opera

  • 程式語言 - Ruby

Ruby 的安裝

步驟 1 - 開啟連結https://www.ruby-lang.org/en/downloads/，您將看到如下所示的螢幕 -

SASS Installation

下載當前穩定版的 zip 檔案。

步驟 2 - 接下來，執行安裝程式以在系統上安裝Ruby。

步驟 3 - 接下來，將 Ruby bin 資料夾新增到您的PATH 使用者變數和系統變數中以使用 gem 命令。

PATH 使用者變數 -

  • 右鍵單擊我的電腦圖示。

  • 選擇屬性。

  • 接下來，單擊高階選項卡，然後單擊環境變數。

SASS Installation

在環境變數視窗中，雙擊PATH，如下面的螢幕截圖所示 -

SASS Installation

您將獲得一個編輯使用者變數框，如下所示。在變數值欄位中新增 ruby bin 資料夾路徑，例如C:\Ruby\bin。如果已為其他檔案設定路徑，則在其後加上分號，然後新增 Ruby 資料夾路徑，如下所示。

SASS Installation

單擊確定按鈕。

系統變數 -

  • 單擊新建按鈕。

SASS Installation

接下來，將顯示新建系統變數塊，如下所示。

SASS Installation

  • 在變數名欄位中輸入RubyOpt，在變數值欄位中輸入rubygems。在寫入變數名和值後，單擊確定按鈕。

步驟 4 - 在您的系統中開啟命令提示符並輸入以下行 -

gem install sass

步驟 5 - 接下來，在成功安裝 SASS 後，您將看到以下螢幕。

SASS Installation

示例

以下是 SASS 的一個簡單示例。

<html>
   <head>
      <title> Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Simple Example</h1>
      <h3>Welcome to TutorialsPoint</h3>
   </body>
</html>

現在，我們將建立一個名為style.scss的檔案，它與 CSS 非常相似，唯一的區別是它將以 .scss 副檔名儲存。.htm 和 .scss 檔案都應該在ruby資料夾內建立。您可以將 .scss 檔案儲存在ruby\lib\sass\資料夾中（在此過程之前，在 lib 目錄中建立一個名為sass的資料夾）。

h1{
   color: #AF80ED;
}

h3{
   color: #DE5E85;
}

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

SASS Installation

當您執行上述命令時，它將自動建立style.css檔案。每當您更改 SCSS 檔案時，style.css檔案都會自動更新。

當您執行上述給定的命令時，style.css檔案將包含以下程式碼 -

style.css

h1 {
   color: #AF80ED;
}
h3 {
   color: #DE5E85;
}

讓我們執行以下步驟來檢視上述給定程式碼的工作原理 -

  • 將上述給定程式碼儲存在hello.html檔案中。

  • 在瀏覽器中開啟此 HTML 檔案。

SASS Installation

Sass - 語法

在本章中，我們將學習 SASS語法。SASS 支援兩種語法，即SCSS和縮排語法。

  • SCSS（Sassy CSS）是 CSS 語法的擴充套件。這意味著每個有效的 CSS 也是有效的 SCSS。SCSS 使維護大型樣式表變得更容易，並且可以識別特定於供應商的語法，許多 CSS 和 SCSS 檔案使用副檔名.scss。

  • 縮排 - 這是舊語法，有時也稱為SASS。使用這種語法形式，可以簡潔地編寫 CSS。SASS 檔案使用副檔名.sass。

SASS 縮排語法

SASS 縮排語法或簡稱 SASS 是基於 SCSS 語法的 CSS 的替代方案。

  • 它使用縮排而不是{和}來分隔塊。

  • 為了分隔語句，它使用換行符而不是分號（;）。

  • 屬性宣告和選擇器必須放在其自己的行上，並且{和}內的語句必須放在新行和縮排上。

例如，考慮以下 SCSS 程式碼 -

.myclass {
   color = red;
   font-size = 0.2em;
}

縮排語法是一種舊語法，不建議在新的 Sass 檔案中使用。如果您使用此檔案，它將在 CSS 檔案中顯示錯誤，因為我們使用了=而不是用於設定屬性和變數。

使用以下命令編譯上述給定程式碼 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將在style.css檔案中顯示如下所示的錯誤 -

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

SASS 的語法差異

大多數 CSS 和 SCSS 語法在 SASS 中都能完美執行。但是，也存在一些差異，將在以下部分中說明 -

屬性語法

CSS 屬性可以透過兩種方式宣告 -

  • 屬性可以像 CSS 一樣宣告，但不帶分號（;）。

  • 冒號（:）將作為每個屬性名稱的字首。

例如，您可以編寫為 -

.myclass
   :color red
   :font-size 0.2em

預設情況下，可以使用上述兩種方式（不帶分號的屬性宣告和以冒號為字首的屬性名稱）。但是，當您使用:property_syntax選項時，只允許指定一種屬性語法。

多行選擇器

在縮排語法中，選擇器可以在逗號後出現的任何時候放在新行上。

示例

以下示例描述了在 SCSS 檔案中使用多行選擇器 -

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

接下來，建立檔案style.scss。請注意.scss副檔名。

style.scss

.class1,
.class2{
   color:red;
}

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述給定的命令，它將自動建立style.css檔案，幷包含以下程式碼 -

生成的style.css如下所示 -

style.css

.class1,
.class2 {
   color: red;
}

輸出

讓我們執行以下步驟來檢視上述給定程式碼的工作原理 -

  • 將上述給定的 html 程式碼儲存在multiline_selectors.html 檔案中。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Sass Syntax

註釋

註釋佔用整行幷包含巢狀在其下的所有文字。它們在縮排語法中是基於行的。有關注釋的更多資訊，請參閱此連結。

@import

在 SASS 中，@import指令可以帶或不帶引號編寫。與 SCSS 不同，它們必須與引號一起使用。

例如，在 SCSS 中，@import指令可以這樣使用 -

@import "themes/blackforest";
@import "style.sass";

這可以在 SASS 中寫成 -

@import themes/blackforest
@import fontstyle.sass

Mixin 指令

SASS 支援@mixin和@include等指令的簡寫。您可以使用=和+字元代替@mixin和@include，這需要更少的鍵入，使您的程式碼更簡單，更容易閱讀。

例如，您可以將 mixin 指令編寫為 -

=myclass
   font-size: 12px;
p
   +myclass

上述給定程式碼與以下程式碼相同 -

@mixin myclass
   font-size: 12px;
p
   @include myclass

已棄用的語法

SASS 支援使用一些舊語法。但是，不建議在 SASS 中使用此語法。如果您使用此語法，將顯示警告，並且在更高版本中將其刪除。以下表格顯示了一些舊語法。

序號 運算子和描述
1

=

它用於代替 : 將 SassScript 的值設定為變數和屬性。
2

||=

每當您為變數分配預設值時，它都用於代替 :。
3

!

代替 $，! 用作變數字首。當它用作 $ 的替代時，功能不會改變。

使用 Sass

SASS 比更強大且穩定，它透過使用 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，這些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 encoding name”，SASS就會假定這是給定的字元編碼。

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

Sass - CSS 擴充套件

在本章中，我們將學習CSS擴充套件。CSS擴充套件可用於增強網頁的功能。下表列出了一些SASS中使用的CSS擴充套件：

序號 CSS擴充套件和描述
1 巢狀規則

這是將多個CSS規則相互組合的一種方式。
2 引用父選擇器：&

這是使用&字元選擇父選擇器的過程。
3 巢狀屬性

它允許將屬性巢狀到其他屬性中，從而導致另一組相關程式碼。
4 佔位符選擇器

Sass透過使用@extend指令使用類或id選擇器來支援佔位符選擇器。

Sass - 註釋

在本章中，我們將學習Sass註釋。註釋是非可執行語句，放置在原始碼中。註釋使原始碼更容易理解。SASS支援兩種型別的註釋。

  • 多行註釋 - 這些使用/*和*/編寫。多行註釋保留在CSS輸出中。

  • 單行註釋 - 這些使用//後跟註釋編寫。單行註釋不會保留在CSS輸出中。

示例

以下示例演示了在SCSS檔案中使用註釋：

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <a href = "https://tutorialspoint.tw/">TutorialsPoint</a>
   </body>
</html>

接下來，建立檔案style.scss。

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令，它將自動建立style.css檔案，其中包含以下程式碼：

style.css

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

輸出

讓我們執行以下步驟來檢視上述給定程式碼的工作原理 -

  • 將上面給出的html程式碼儲存在sass_comments.html檔案中。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Sass Comments

要研究多行註釋中的插值，請單擊此連結。

Sass – 多行註釋中的插值

描述

多行註釋中的插值在生成的CSS中解析。您可以在花括號內指定變數或屬性名稱。

語法

$var : "value";
/* multiline comments #{$var} */

示例

以下示例演示了在SCSS檔案中使用多行註釋中的插值：

<html>
   <head>
      <title>SASS comments</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <p>This is an example for Interpolation in SASS.</p>
   </body>
</html>

接下來，建立檔案style.scss。

style.css

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立style.css檔案，其中包含以下程式碼

style.css

/* Framework version for the generated CSS is 7.8. */

輸出

讓我們執行以下步驟來檢視上述給定程式碼的工作原理 -

  • 將上面給出的html程式碼儲存在sass_comments_interpolation.htm檔案中。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Sass Comments

Sass - 指令碼

SASS使用一小組稱為SassScript的擴充套件，這些擴充套件可以包含在SASS文件中，以根據屬性值計算變數，並使用變數、算術和其他函式的屬性。在使用mixin（mixin允許在整個樣式表中重複使用CSS樣式）時，SassScript也可以與選擇器和屬性名稱一起使用。

下表列出了SASS中使用的一些CSS擴充套件：

序號 CSS擴充套件和描述
1 互動式Shell

它使用命令列評估SassScript表示式。
2 變數

它表示資料，例如數值、字元或記憶體地址。
3 資料型別

它為每個資料物件宣告資料型別。
4 運算

它提供諸如數字、顏色、字串、布林值和列表運算之類的運算。
5 括號

它是一對符號，通常用圓括號（ ）或方括號[]標記。
6 函式

它透過提供一些關鍵字引數來支援函式的使用。
7 插值

它使用#{ }語法提供SassScript變數和屬性名稱。
8 & 在SassScript中

它允許將屬性巢狀到另一個屬性中，從而導致另一組相關程式碼。
9 變數預設值

它允許將屬性巢狀到另一個屬性中，從而導致另一組相關程式碼。

Sass - @規則和指令

下表列出了您可以在SASS中使用的所有規則和指令。

序號 指令和描述
1 @import

它匯入SASS或SCSS檔案，它直接獲取要匯入的檔名。
2 @media

它將樣式規則設定為不同的媒體型別。
3 @extend

@extend指令用於共享選擇器之間的規則和關係。
4 @at-root

@at-root指令是巢狀規則的集合，它能夠在文件的根部建立樣式塊。
5 @debug

@debug指令檢測錯誤並將SassScript表示式的值顯示到標準錯誤輸出流。
6 @warn

@warn指令用於對問題提出警告建議；它將SassScript表示式的值顯示到標準錯誤輸出流。
7 @error

@error指令將SassScript表示式的值顯示為致命錯誤。

Sass - 控制指令和表示式

在本章中，我們將學習控制指令和表示式。基於某些條件的樣式或多次應用相同的樣式並進行更改可以透過使用控制指令和表示式來實現，這些指令和表示式受SassScript支援。這些控制指令是高階選項，主要用於mixin。它們需要相當大的靈活性，因為它們是Compass庫的一部分。

下表列出了SASS中使用的控制指令和表示式：

序號 控制指令和表示式及其描述
1 if()

根據條件，if()函式僅從兩個可能的輸出中返回一個結果。
2 @if

@if指令接受SassScript表示式，並在表示式的結果為false或null以外的任何內容時使用巢狀樣式。
3 @for

@for指令允許您在迴圈中生成樣式。
4 @each

在@each指令中，定義了一個變數，其中包含列表中每個專案的價值。
5 @while

它接受SassScript表示式，並在語句計算結果為false之前迭代輸出巢狀樣式。

Sass - Mixin 指令

Mixin 允許建立一組樣式，這些樣式可以在整個樣式表中重複使用，而無需重新建立非語義類。在 CSS 中，Mixin 可以儲存多個值或引數並呼叫函式；它有助於避免編寫重複程式碼。Mixin 名稱可以使用下劃線和連字元互換。以下是 Mixin 中存在的指令：

序號 指令 & 描述
1 定義 Mixin

@mixin 指令用於定義 Mixin。
2 包含 Mixin

@include 指令用於在文件中包含 Mixin。
3 引數

SassScript 值可以作為 Mixin 中的引數，在包含 Mixin 時給出，並在 Mixin 中作為變數使用。
4 將內容塊傳遞給 Mixin

將樣式塊傳遞給 Mixin。

Sass - 函式指令

在本章中，我們將學習函式指令。在 SASS 中，您可以建立自己的函式並在指令碼上下文中使用它們，或者與任何值一起使用。函式透過使用函式名稱和任何引數來呼叫。

示例

以下示例演示了在 SCSS 檔案中使用函式指令：

function_directive.htm

<html>
   <head>
      <title>Nested Rules</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <div class = "container" id = "set_width">
         <h2>Example for Function directives</h2>
         <p>SASS stands for Syntactically Awesome Stylesheet. </p>
      </div>
   </body>
</html>

接下來，建立檔案style.scss。

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
   @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

您可以告訴 SASS 監視該檔案並在 SASS 檔案更改時更新 CSS，使用以下命令 -

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來，執行上述命令；它將自動建立style.css檔案，其中包含以下程式碼：

style.css

#set_width {
   padding-left: 95px; 
}

輸出

讓我們執行以下步驟來檢視上述給定程式碼的工作原理 -

  • 將上面給定的 html 程式碼儲存到function_directive.html檔案中。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Sass Function Directives

在輸出中，您可以看到正在應用左填充。

就像 Mixin 一樣，函式也可以訪問全域性定義的變數，並且也可以接受引數。您應該透過使用@return來呼叫函式的返回值。我們可以使用關鍵字引數來呼叫 SASS 定義的函式。

按如下所示呼叫上述函式。

#set_width { padding-left: adjust_width($n: 10); }

命名約定

為了避免命名衝突，函式名稱可以加字首，以便於區分。與 Mixin 一樣，使用者定義的函式也支援變數引數。函式和其他 SASS 識別符號可以使用下劃線（_）和連字元（-）互換。

例如，如果一個函式被定義為adjust_width，它可以被用作adjust-width，反之亦然。

Sass - 輸出樣式

在本章中，我們將學習SASS 輸出樣式。SASS 生成的 CSS 檔案包含預設的 CSS 樣式，它反映了文件的結構。預設的 CSS 樣式很好，但可能不適用於所有情況；另一方面，SASS 支援許多其他樣式。

它支援以下不同的輸出樣式：

:nested

巢狀樣式是 SASS 的預設樣式。這種樣式在處理大型 CSS 檔案時非常有用。它使檔案的結構更易於閱讀，並且可以輕鬆理解。每個屬性都佔據一行，每個規則的縮排都基於它巢狀的深度。

例如，我們可以在 SASS 檔案中巢狀如下程式碼：

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

:expanded

在擴充套件型別的 CSS 樣式中，每個屬性和規則都佔據一行。與巢狀 CSS 樣式相比，它佔用更多空間。規則部分包含屬性，這些屬性都在規則內縮排，而規則不遵循任何縮排。

例如，我們可以在 SASS 檔案中擴充套件如下程式碼：

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:compact

緊湊型 CSS 樣式與擴充套件型和巢狀型相比，佔用空間更少。它主要關注選擇器而不是其屬性。每個選擇器佔用一行，其屬性也放置在同一行。巢狀規則彼此相鄰放置，沒有換行符，並且單獨的規則組將在它們之間有換行符。

例如，我們可以在 SASS 檔案中壓縮如下程式碼：

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

:compressed

壓縮 CSS 樣式與上面討論的所有其他樣式相比，佔用空間最少。它僅提供空格來分隔選擇器，並在檔案末尾換行。這種樣式令人困惑，並且不容易閱讀。

例如，我們可以在 SASS 檔案中壓縮如下程式碼：

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}

擴充套件 Sass

您可以擴充套件 SASS 的功能，為使用者提供不同型別的功能和自定義。要使用這些功能，使用者應該具備 Ruby 的知識。

定義自定義 SASS 函式

在使用 Ruby API 時，您可以定義自己的 SASS 函式。您可以透過將自定義函式新增到 Ruby 方法中來新增它們，如下面的程式碼所示：

module Sass::Script::Functions
   def reverse(string)
      assert_type string, :String
      Sass::Script::Value::String.new(string.value.reverse)
   end
   declare :reverse, [:string]
end

在程式碼中您可以看到，Function、declare 指定了函式的引數名稱。如果失敗，即使函式正在工作，它也不會接受任何引數，並且它也接受任意關鍵字引數。您可以使用value訪問器獲取 Ruby 值，並使用rgb、red、green或blue訪問顏色物件。

快取儲存

SASS 儲存已解析文件的快取，可以重複使用而無需再次解析。SASS 使用:cache_location將快取檔案寫入檔案系統。它使 SASS 檔案的編譯速度更快，如果您刪除快取檔案，則下次編譯時它們將再次生成。您可以透過設定:cache_store選項來定義自己的快取儲存。這將在檔案系統上寫入快取檔案，或將快取檔案共享到 ruby 程序或機器。SASS 使用Sass::CacheStores::Base的子類的例項來儲存和檢索快取結果。

自定義匯入器

SASS 使用@import匯入 SCSS 和 SASS 檔案，並將路徑傳遞給@import規則以查詢指定路徑的適當路徑程式碼。SASS 匯入器使用檔案系統載入程式碼並新增到使用資料庫或不同檔案命名方案的載入中。

單個匯入器可以採用單個檔案載入，並且可以放置在:load_paths陣列中以及檔案系統的路徑中。在使用@import時，SASS 會查詢已載入的路徑，這些路徑將匯入匯入器的路徑。找到路徑後，將使用匯入的檔案。使用者可以從Sass::Importers::Base繼承匯入器。

列印頁面
上一頁
下一頁
廣告