免費AI編程助手
Sass 語法
在本章中，我們將學(xué)習(xí)SASS 語法。SASS支持兩種語法，即 SCSS 和縮進語法。
SCSS（Sassy CSS）是CSS語法的擴展。這意味著每個有效的CSS也是一個有效的SCSS。SCSS更容易維護大型樣式表，并且可以識別供應(yīng)商特定的語法和許多CSS。SCSS文件使用擴展名 .scss 。
縮進 - 這是較舊的語法，有時僅稱為 Sass 。使用這種形式的語法，可以簡潔地編寫CSS。SASS文件使用擴展名 .sass 。
SASS縮進語法
SASS縮進語法或只是SASS是基于CSS的SCSS語法的替代。
它使用縮進而不是 {和} 來分隔塊。
要分隔語句，它使用換行符而不是分號（;）。
屬性聲明和選擇器必須放在一行，{和}中的語句必須放在新行和縮進。
例如，考慮以下SCSS代碼:
.myclass {
color= red;
font-size= 0.2em;
}
縮進語法是一種舊的語法，不建議在新的Sass文件中使用。如果使用此文件，它將在CSS文件中顯示錯誤，因為我們使用 = 而不是:來設(shè)置屬性和變量。
使用下面的命令編譯上面的代碼:
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的語法差異
大多數(shù)CSS和SCSS語法在SASS中工作完美。但是，有一些差異，在以下部分中解釋:
屬性語法
CSS屬性可以通過兩種方式聲明:
屬性可以聲明為類似于CSS但沒有分號（;）。
colon（:）將以每個屬性名稱為前綴。
例如，您可以寫為:
.myclass :color red :font-size 0.2em
默認情況下，可以使用上述兩種方法（屬性聲明不帶分號，冒號以屬性名稱開頭）。 但是，在使用 “>:property_syntax 選項。
多線選擇器
在縮進語法中，選擇器可以在逗號后出現(xiàn)時放在換行符上。
例子
下面的示例描述了在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。 請注意 .scss 擴展名。
style.scss
.class1,
.class2{
color:red;
}
您可以通過使用以下命令讓SASS查看文件并在SASS文件更改時更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來執(zhí)行上面的命令，它將用下面的代碼自動創(chuàng)建 style.css 文件:
生成的 style.css 如下所示:
style.css
.class1,
.class2 {
color: red;
}
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
在 multiline_selectors.html 文件中保存html代碼。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
注釋
注釋占用整行并包圍嵌套在它們下面的所有文本，它們是基于行的縮進語法。 有關(guān)評論的詳細信息，請參閱此鏈接。
@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 | = 它用于代替:將變量和屬性設(shè)置為SassScript的值。 |
| 2 | || = 它被用來代替:每當(dāng)你分配一個變量的默認值。 |
| 3 | ！ 而不是$，！ 被用作可變前綴。 當(dāng)使用函數(shù)而不是$時，函數(shù)不會改變。 |
更多建議：