CSS-当前主流的三种预编译器比较

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用；
让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

当前主流的三种预编译器

less
sass
stylus

比较一:基本语法的区别

首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。

/* style.scss or style.less */
h1 {
  color: #666666;

但是，不过 Sass 同时也支持老的语法，就是不包含花括号和分号的方式：

/* style.sass */
h1
   color: #666666;

而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，它可以既没有花括号也没用冒号。下面是 Stylus 支持的语法：

/* style.styl */
h1 {
   color: #666666;
}
 
/* omit brackets */
h1
   color: #666666;
 
/* omit colons and semi-colons */
h1
  color: #666666

可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

比较二:变量

Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
Less 声明变量用『@』开头，其余等同 Sass。
Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』

Sass
Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

$maincolor : #666666;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
  color: $maincolor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

Less
在less文件中，当一个值需要反复使用时，可以通过@符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。

@maincolor : #666666;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
  color: @maincolor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

sass和less用法极其类似，saas用$,less用@.

Stylus
stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，
但是在stylus中不能用@开头，例如：

maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body 
  color maincolor
  border 1px borderStyle mainColor
  max-width siteWidth

以上三种写法等同于:

body {
  color: #092873;
  border: 1px dotted #092873;
  max-width: 1024px;
}

比较三:嵌套

如下代码，大家肯定经常用到或者很常见

div {
  margin: 10px;
}
div nav {
  height: 25px;
}
div nav a {
  color: #ffffff;
}
div nav a:hover {
  text-decoration: underline;
}

如果用 CSS 预处理器，就可以少写很多单词，而且父子节点关系一目了然，并且sass，Less，stylus都支持下面这样的写法，且都是相同的：

nav { 
    ul { 
       margin: 0; 
       padding: 0; 
    } 
    li { 
       display: inline-block; 
    } 
    a { 
       display: block; 
       padding: 6px 12px; 
       text-decoration: none; 
    } 
}

比较四:运算符

在 CSS 预处理器中还是可以进行样式的计算如下：

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}

比较五:运算符

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等
1.sass的颜色处理函数：

lighten($color, 10%); 
darken($color, 10%);  
saturate($color, 10%);   
desaturate($color, 10%);
grayscale($color);  
complement($color); 
invert($color); 
mix($color1, $color2, 50%);

实例如下：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

2.less的颜色处理函数：
用@,其余同sass

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

3.Stylus颜色处理函数：

lighten(color, 10%); 
darken(color, 10%);  
saturate(color, 10%);  
desaturate(color, 10%);

实例如下：

color = #0982C1 
h1
  background color
  border 3px solid darken(color, 50%)

比较六:继承

1.sass：
sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  @extend .message;
  border-color: green;
}
.error {
  @extend .message;
  border-color: red;
}
.warning {
  @extend .message;
  border-color: yellow;
}

2.Less css：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  .message;
  border-color: green;
}
.error {
  .message;
  border-color: red;
}
.warning {
  .message;
  border-color: yellow;
}

以上两种写法等同于：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

比较七:Mixins（混入）

Mixins 有点像是函数或者是宏，当某段 CSS 经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个 Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。
可以理解成，定义了一个公用的方法，传入不同的参数去调用这个方法。
1.sass

// logo 高度
@value logoHeight: 160px;

// logo的样式 logo（$x:2px）,也可以有默认参数
@mixin logo($x, $y, $width, $height, $logoHeight) {
  display: inline-flex;
  height: $logoHeight;
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  background: url('../assets/basic/logo.png') no-repeat;
  background-position: $x $y;
  background-size: $width $height;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  transition: background 0.2s, width 0.2s, height 0.2s;
}

// 在引用的地方@include logo（）
.logo {
   @include logo(19px, 22px, 120px, 120px, logoHeight);
}

2.less

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); //这里调用默认 border: 2px solid #F00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); //这里调用 border:5px solid #F00;
}

3.Stylus
与less的区别是，引用的时候，可以不用加 (点 .)

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); 
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); 
}

比较八:3D文本

要生成具有 3D 效果的文本可以使用 text-shadows ，唯一的问题就是当要修改颜色的时候就非常的麻烦，而通过 mixin 和颜色函数可以很轻松的实现：

用法跟mixin的用法一致
1.sass

@mixin text3d($color) {
  color: $color;
  text-shadow: 1px 1px 0px darken($color, 5%),
               2px 2px 0px darken($color, 10%),
               3px 3px 0px darken($color, 15%),
               4px 4px 0px darken($color, 20%),
               4px 4px 2px #000;
}
 
h1 {
  font-size: 32pt;
  @ include text3d(#0982c1);
}

2.less css

.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}
 
span {
  font-size: 32pt;
  .text3d(#0982c1);
}

3.stylus

text3d(color)
  color: color
  text-shadow: 1px 1px 0px darken(color, 5%), 
               2px 2px 0px darken(color, 10%), 
               3px 3px 0px darken(color, 15%), 
               4px 4px 0px darken(color, 20%), 
               4px 4px 2px #000
span
  font-size: 32pt
  text3d(#0982c1)

其生成的css最终的效果如下：


span {
  font-size: 32pt;
  color: #0982c1;
  text-shadow: 1px 1px 0px #097bb7,
               2px 2px 0px #0875ae,
               3px 3px 0px #086fa4,
               4px 4px 0px #07689a,
               4px 4px 2px #000;
}

比较九:3D文本

在sass中，还支持条件语句：
@if可一个条件单独使用，也可以和@else结合多条件使用

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

其最终的css代码如下：

.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

其他：sass还支持for，each等其他用法，自己上官网see，see吧。

链接🔗：
sass：https://www.sass.hk/
lesscss：http://lesscss.cn/
stylus:http://stylus-lang.com/