使用预处理器主要目的就是编写出可读性更好、更易于维护的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魔法的为什么要使用预处理器：