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:rubylibsassstyle.scss:style.css

接下来，运行上面的命令，它会在style.css的文件中显示错误信息，如下所示：

Error: Invalid CSS after "  color= red": expected "{", was ";"
        on line 2 of C:rubylibsassstyle17.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.bootwiki.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-x64style.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	! 代替$，!用作变量前缀。当它被用来代替$时，功能将不会改变。