預(yù)處理器的目的都是為了更快、更結(jié)構(gòu)的編寫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) |
| **顏色函數(shù) ** | 變亮lighten($color, 10%); 變暗 darken($color, 10%); 提高色彩飽和度 saturate($color, 10%); 調(diào)低色彩飽和度 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%); }
|
| 導(dǎo)入 | @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
|
