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.yiibai.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文件，輸出如下顯示。

Sass語法

註釋

註釋佔用整行，並附嵌套在它們所有的文字並且它們都是基於行的縮進語法。有關注釋的詳細信息，請 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.

運算符和說明

它被用來代替：設置變量和屬性時SassScript的值。

||=

它被用來代替：每當分配一個變量的缺省值。

代替$，!用作變量前綴。當它被用來代替$時，功能將不會改變。

SASS教程

SASS縮進語法

屬性語法

示例

style.scss

style.css

註釋

@import