三、基本用法
最后更新于：2022-04-01 06:11:01
## 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源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
> /*!
> 重要注释！
> */