Sass - 語法

上一頁
下一頁

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

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

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

SASS 縮排語法

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

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

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

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

例如，考慮以下 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

!

變數字首使用 ! 代替 $。當它用作 $ 的替代時，功能不會改變。
列印頁面
上一頁
下一頁
廣告