在本章我们学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文件,输出如下显示。
注释
注释占用整行,并附嵌套在它们所有的文字并且它们都是基于行的缩进语法。有关注释的详细信息, 请 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 |
!
代替$,!用作变量前缀。当它被用来代替$时,功能将不会改变。
|