ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 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源文件中,编译后被省略。 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。 >   /*!  >     重要注释! >   */