【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解

想要查看关于 CSS 的相关面试题，请移步至 面试题 - CSS 篇 查看，其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。

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

什么是预编译器：

CSS预编译器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用；

优点：

可以让我们的CSS代码更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

当前主流的三种预编译器：

• Sass
• Less
• Stylus

比较：

比较一：基本语法

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

  /* style.scss or style.less */
  h1 {
    color: #666666;
  }
  /* 但是，Sass同时也支持老的语法，就是不包含花括号和分号的方式： */
  h1
  	  color: #666666;
  

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

  /* style.styl */
  h1 {
     color: #666666;
  }
   
  /* 省略括号 */
  h1
     color: #666666;
   
  /* 省略冒号和分号 */
  h1
    color: #666666
  

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

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

比较二：变量

• Sass 声明变量必须是 $ 开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号 : 分隔开。

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

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

• Less 声明变量用 @ 开头，其余等同 Sass。

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

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

• Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有 =。

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

    maincolor = #666666
    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 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。

• Sass

  • 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%);
  }
  

• Less

  • Less 的颜色处理函数：
    用 @ ，其余同 Sass

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

• Stylus

  • Stylus颜色处理函数：

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

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

比较六：继承

• 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;
  }
  

• Less

  .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 即可。

可以理解成：定义了一个公用的方法，传入不同的参数去调用这个方法。

• 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);
  }
  

• 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; */
  }
  

• 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 的用法一致

• 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);
  }
  

• Less

  .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);
  }
  

• 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;
  }
  

比较九：支持条件语句

• 在 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/
• Less：http://lesscss.cn/
• Stylus：http://stylus-lang.com/

---

希望以上内容对你的学习面试有所帮助，最后不要忘记一键三连哦~

少年 加油！