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 !
代替$,!用作變數字首。當它被用來代替$時,功能將不會改變。