閱讀(14.1k) 書簽贊(0) 我要糾錯(cuò)

Sass 語(yǔ)法

2018-12-29 10:45 更新

在本章中，我們將學(xué)習(xí)SASS 語(yǔ)法。SASS支持兩種語(yǔ)法，即 SCSS 和縮進(jìn)語(yǔ)法。

SCSS（Sassy CSS）是CSS語(yǔ)法的擴(kuò)展。這意味著每個(gè)有效的CSS也是一個(gè)有效的SCSS。SCSS更容易維護(hù)大型樣式表，并且可以識(shí)別供應(yīng)商特定的語(yǔ)法和許多CSS。SCSS文件使用擴(kuò)展名 .scss 。
縮進(jìn) - 這是較舊的語(yǔ)法，有時(shí)僅稱為 Sass 。使用這種形式的語(yǔ)法，可以簡(jiǎn)潔地編寫CSS。SASS文件使用擴(kuò)展名 .sass 。

SASS縮進(jìn)語(yǔ)法

SASS縮進(jìn)語(yǔ)法或只是SASS是基于CSS的SCSS語(yǔ)法的替代。

它使用縮進(jìn)而不是 {和} 來分隔塊。
要分隔語(yǔ)句，它使用換行符而不是分號(hào)（;）。
屬性聲明和選擇器必須放在一行，{和}中的語(yǔ)句必須放在新行和縮進(jìn)。

例如，考慮以下SCSS代碼:

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

縮進(jìn)語(yǔ)法是一種舊的語(yǔ)法，不建議在新的Sass文件中使用。如果使用此文件，它將在CSS文件中顯示錯(cuò)誤，因?yàn)槲覀兪褂?strong> = 而不是:來設(shè)置屬性和變量。

使用下面的命令編譯上面的代碼:

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

接下來，運(yùn)行上面的命令，它將在 style.css 文件中顯示錯(cuò)誤，如下所示:

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的語(yǔ)法差異

大多數(shù)CSS和SCSS語(yǔ)法在SASS中工作完美。但是，有一些差異，在以下部分中解釋:

屬性語(yǔ)法

CSS屬性可以通過兩種方式聲明:

屬性可以聲明為類似于CSS但沒有分號(hào)（;）。
colon（:）將以每個(gè)屬性名稱為前綴。

例如，您可以寫為:

.myclass
  :color red
  :font-size 0.2em

默認(rèn)情況下，可以使用上述兩種方法（屬性聲明不帶分號(hào)，冒號(hào)以屬性名稱開頭）。但是，在使用 “>:property_syntax 選項(xiàng)。

多線選擇器

在縮進(jìn)語(yǔ)法中，選擇器可以在逗號(hào)后出現(xiàn)時(shí)放在換行符上。

例子

下面的示例描述了在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="/attachments/tuploads/sass/jquery.min.js"></script>
   <script src="/attachments/tuploads/sass/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>

接下來，創(chuàng)建文件 style.scss。請(qǐng)注意 .scss 擴(kuò)展名。

style.scss

.class1,
.class2{
   color:red;
}

您可以通過使用以下命令讓SASS查看文件并在SASS文件更改時(shí)更新CSS:

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

接下來執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

生成的 style.css 如下所示:

style.css

.class1,
.class2 {
  color: red;
}

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:

在 multiline_selectors.html 文件中保存html代碼。
在瀏覽器中打開此HTML文件，將顯示如下輸出。

注釋

注釋占用整行并包圍嵌套在它們下面的所有文本，它們是基于行的縮進(jìn)語(yǔ)法。有關(guān)評(píng)論的詳細(xì)信息，請(qǐng)參閱此鏈接。

@import

在SASS中， @import 指令可以使用/不使用引號(hào)。與SCSS不同，它們必須使用引號(hào)。

例如，在SCSS中， @import 指令可以用作:

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

這可以在SASS中寫為:

@import themes/blackforest
@import fontstyle.sass

Mixin指令

SASS支持 @mixin 和 @include 等指令的縮寫。您可以使用 = 和 + 字符替換 @mixin 和 @include 更簡(jiǎn)單，更容易閱讀。

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

=myclass
  font-size: 12px;

p
  +myclass

是相同的

@mixin myclass
  font-size: 12px;

p
  @include myclass

已棄用的語(yǔ)法

SASS支持使用一些舊的語(yǔ)法。但是，在SASS中使用此語(yǔ)法是不推薦。如果您使用此語(yǔ)法將顯示警告，并且將在以后的版本中刪除它。一些舊的語(yǔ)法如下表所示。

序號(hào)	運(yùn)算符和描述
1	= 它用于代替:將變量和屬性設(shè)置為SassScript的值。
2	\|\| = 它被用來代替:每當(dāng)你分配一個(gè)變量的默認(rèn)值。
3	！而不是$，！被用作可變前綴。當(dāng)使用函數(shù)而不是$時(shí)，函數(shù)不會(huì)改變。