## 3.1 变量
SASS允许使用变量,所有变量以$开头。
> $blue : #1875e7;
>
> div {
> color : $blue;
> }
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
> $side : left;
>
> .rounded {
> border-#{$side}-radius: 5px;
> }
## 3.2 计算功能
SASS允许在代码中使用算式:
> body {
> margin: (14px/2);
> top: 50px + 100px;
> right: $var * 10%;
> }
## 3.3 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
> div h1 {
> color : red;
> }
可以写成:
> div {
> hi {
> color:red;
> }
> }
属性也可以嵌套,比如border-color属性,可以写成:
> p {
> border: {
> color: red;
> }
> }
注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
> a {
> &:hover { color: #ffb3ff; }
> }
## 3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
> /*!
> 重要注释!
> */