sass之为什么要使用预处理器

使用预处理器主要目的就是编写出可读性更好、更易于维护的css。

以sass为例，sass中提供了@import可以在sass文件中导入其他sass文件，或在选择器中按需导入所需要的某个属性样式：

@import
@import foo.scss 等同于 @import foo
@import 除了可以导入scss文件，还可以在样式表中导入某一个样式
  .example { color: red; }
  #main { @import "example"; }

  结果：
#main .example { color: red; }

sass中还可以定义变量、嵌套选择器、定义函数、利用mixin还可以实现公共样式的复用，将常用的代码封装在mixin中，然后在内部实现按需调用。

@mixin
1、@mixin sexy-border($color, $width) {
    border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

2、@mixin sexy-border($color, $width: 1in) {
        border: { color: $color; width: $width; style: dashed; }
      }
     p { @include sexy-border(blue); }
     h1 { @include sexy-border(blue, 2in); }

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

3、
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

4、
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

　　

　　在多人合作开发项目的情况下，项目中使用预处理是非常有用的，将公共样式写在一个单独的文件中，每个人只需要在自己编写的sass文件顶部采用@import就

可以导入公共样式，html中也不需要再多引入一个公共的css文件，这对页面加载和渲染也是很有用的。更重要的是采用预处理器可以帮助我们写出更加易于阅读和

可维护的css。

sass学习地址：

css魔法的为什么要使用预处理器：