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

SASS縮進(jìn)語法

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

它采用縮進(jìn)，而不是{和}分隔塊。
要分割語句，它使用新行，而不是分號(;)。
屬性聲明和選擇器必須放在單獨占一行，聲明的{和}必須放在新行而且要縮進(jìn)。

例如，請考慮以下SCSS代碼：

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

縮進(jìn)語法是一個較舊的語法，這不建議在新的Sass文件中使用。如果使用此文件，它將在CSS文件中顯示的錯誤，因為我們已經(jīng)使用=代替：用于設(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語法完全在SCSS中工作。不過，也有一些差異會在下面的章節(jié)中解釋：

屬性語法

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

屬性聲明與CSS類似，但沒有分號(;)。
冒號(:) 的前面是每一個屬性的名稱。

比如，可以寫為：

.myclass
  :color red
  :font-size 0.2em

以上兩種方法(屬性聲明沒有分號，冒號和前綴屬性名)可使用默認(rèn)值。但是，只有一個屬性語法允許指定使用 :屬性語法選項.

多行選擇器

在縮進(jìn)語法，選擇器可以放在新行的逗號之后。

示例

下面的例子說明使用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" >
   <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>

下一步創(chuàng)建style.scss. 注意它的擴(kuò)展名是：.scss

style.scss

.class1,
.class2{
   color:red;
}

可以告訴SASS更新CSS，只要通過使用下面的命令SASS文件自動更新文件變化：

sass --watch C:\Ruby22-x64\style.scss:style.css

接著執(zhí)行上面的命令，它會自動創(chuàng)建style.css文件，如下面的代碼：

所產(chǎn)生的style.css文件內(nèi)容如下：

style.css

.class1,
.class2 {
  color: red;
}

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

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

注釋

注釋占用整行，并附嵌套在它們所有的文字并且它們都是基于行的縮進(jìn)語法。有關(guān)注釋的詳細(xì)信息，請 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

相當(dāng)于下面：

@mixin myclass
  font-size: 14px;

p
  @include myclass

不推薦使用語法

SASS支持一些舊的語法。但是使用這種語法SASS是不推薦的。如果使用這種語法它將顯示警告，這些語法會在以后的版本中刪除。一些舊的語法在下表中列出。

S.N.	運算符和說明
1	= 它被用來代替：設(shè)置變量和屬性時SassScript的值。
2	\|\|= 它被用來代替：每當(dāng)分配一個變量的缺省值。
3	! 代替$，!用作變量前綴。當(dāng)它被用來代替$時，功能將不會改變。

上一篇：Sass變量下一篇：Sass交互式shell

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Sass語法