SASS教學 » Sass語法

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語法完全在SCSS中工作。不過，也有一些差異會在下面的章節中解釋：

屬性語法

CSS屬性可以通過兩種方式宣告：
  • 屬性宣告與CSS類似，但沒有分號(;)。
  • 冒號(:) 的前面是每一個屬性的名稱。
比如，可以寫為： 
.myclass
  :color red
  :font-size 0.2em 

以上兩種方法(屬性宣告沒有分號，冒號和字首屬性名)可使用預設值。但是，只有一個屬性語法允許指定使用 :屬性語法 選項.

多行選擇器

在縮排語法，選擇器可以放在新行的逗號之後。

範例

下面的例子說明使用SCSS檔案的多行選擇器： 
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>多行選擇器 - www.tw511.com</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>多行選擇器的範例</h2>
   <p class="class1">Welcome to Yiibai Yiibai</p>
   <p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p>
</body>
</html>

下一步建立style.scss. 注意它的擴充套件名是：.scss 

style.scss 

.class1,
.class2{
   color:red;
}
可以告訴SASS更新CSS，只要通過使用下面的命令SASS檔案自動更新檔案變化： 
sass --watch C:\Ruby22-x64\style.scss:style.css
接著執行上面的命令，它會自動建立style.css檔案，如下面的程式碼：
所產生的style.css檔案內容如下：

style.css 

.class1,
.class2 {
  color: red;
}
讓我們來執行以下步驟，看看上面的程式碼如何工作：
  • 儲存上述HTML程式碼到 multiline_selectors.html 檔案中。
  • 在瀏覽器中開啟該HTML檔案，輸出如下顯示。

注釋

注釋佔用整行，並附巢狀在它們所有的文字並且它們都是基於行的縮排語法。有關注釋的詳細資訊， 請 link.

@import

SASS的@import指令可以寫帶/不帶引號。不像在SCSS必須使用引號。例如，在SCSS的@import指令可以用作： 
@import "themes/blackforest";
@import "style.sass";
這可以寫成SASS為： 
@import themes/blackforest
@import fontstyle.sass

混合指令

SASS支援簡寫形式就像@mixin和@include指令。代替@mixin和@include，可以使用=和+字元需要更少的輸入，使程式碼更簡單，更易於閱讀。
比如，可以寫混入指令為： 
=myclass
  font-size: 14px;

p
  +myclass

相當於下面： 

@mixin myclass
  font-size: 14px;

p
  @include myclass

不推薦使用語法

SASS支援一些舊的語法。但是使用這種語法SASS是不推薦的。如果使用這種語法它將顯示警告，這些語法會在以後的版本中刪除。一些舊的語法在下表中列出。
S.N.
運算子和說明
1 =
它被用來代替：設定變數和屬性時SassScript的值。
2 ||=
它被用來代替：每當分配一個變數的預設值。
3 !
代替$，!用作變數字首。當它被用來代替$時，功能將不會改變。