预处理器的目的都是为了更快、更结构的编写css文件，都能使用变量、运算符、判断、方法等等。
| 处理器 | sass(scss是sass的升级版) |
less |
stylus |
|---|---|---|---|
| 扩展名 | .sass/.scss |
.less |
.styl |
| 定义变量 | $ |
@ |
任意符号(不能用@开头) |
| 嵌套 |
nav {ul { margin: 0; padding: 0; } li{ display: inline-block; }}
|
(同sass) |
(同sass) |
| **运算符 ** |
a { margin: (10px/2); top {10px + 10px}; left: 20 * 2%;}
|
(同sass) |
(同sass) |
| **颜色函数 ** | 变亮lighten($color, 10%); 变暗 darken($color, 10%); 提高色彩饱和度 saturate($color, 10%); 调低色彩饱和度 desaturate($color, 10%); 变灰 grayscale($color); 补充色 complement($color); 反相色 invert($color); 混合2种颜色 mix($color1, $color2, 50%); 实例： $color: #aaa; h1 { background: $color; border: 1px solid darken($color, 50%); }
|
lighten(@color, 10%); darken(@color, 10%);saturate(@color, 10%);desaturate(@color, 10%);spin(@color, 10);spin(@color, -10);mix(@color1, @color2);实例： @color: #aaa; h1 { background: @color; border: 1px solid darken(@color, 50%); }
|
lighten(color, 10%);darken(color, 10%);saturate(color, 10%);desaturate(color, 10%);实例： color: #aaa; h1 { background: color; border: 1px solid darken(color, 50%); }
|
| 导入 | @import "1.sass/less/styl" |
(同sass) |
(同sass) |
| 继承 | @extend 类名(@extend .nav) |
类名(.nav) |
- |
Mixins混入 |
@mixin a($borderwidh: 2px) { border: $borderwidth solid #F00; } .b { @ include a(); margin: 10px;}
|
.a(@borderwidh: 2px) { border: @borderwidth solid #F00; } .b { a(); margin: 10px;}
|
.a(borderwidh: 2px) { border: borderwidth solid #F00; } .b { a(); margin: 10px;}
|
| 高级语法 |
@if @else if @else@for $var from <start> through <end>@for $var from <start> to <end>@while xx@each xx in xx
|
- |
if else if else unless、for .. in
|
