sass

sass

1. css扩展语言
2. 兼容所有版本的css
3. 基于Ruby语言开发

sass

1. 使用变量

$highlight-color: #fff;
.text { color: $highlight-color } ---> .text{ color: #fff }

2. 嵌套的css

3. 导入sass文件之 @import css中允许一个css文件导入其他css文件，然而只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载很慢。 sass的@import 是在生成css文件的时候，就会把相关css文件导入进来，所有的相关的样式会被归纳到同一个文件中，

4. 混合器

5. 重用大段样式 @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } @include 调用会把混合器中的所有样式提取出来，放在@include被调用的地方

6. 可以给混合器进行传参

  @mixin link-colors($normal, $hover, $visited) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
 }
  a {
     @include link-colors(
         $normal: blue,
         $visited: green,
         $hover: red
    );
 }