返回博客列表页

CSS 预处理器-Sass，Less，Stylus 对比

基本使用

• Sass

body {
  color: #fff;
}

• Less

body {
  color: #fff;
}

• Stylus

body
  color #fff

变量

• Sass

$base: #fff;
body {
  color: $base;
}

• Less

@base: #fff;
body {
  color: @base;
}

• Stylus

base = #fff;
body
  color base

嵌套选择器

• Sass

body {
  p {
    color: #fff;
  }
  &:hover {
    color: #000;
  }
}

• Less

body {
  p {
    color: #fff;
  }
  &:hover {
    color: #000;
  }
}

• Stylus

body
  p
    color: #fff;
  &:hover
    color: #000;

混合

• Sass

@mixin fontSize {
  font-size: 20px;
}
body {
  @include fontSize;
}

• Less

.fontSize {
  font-size: 20px;
}
body {
  .fontSize();
}

• Stylus

fontSize =
  font-size: 20px;
body {
  {fontSize};
}

继承

• Sass

.fontSize {
  font-size: 20px;
}
body {
  @extend .fontSize;
}

• Less

.fontSize {
  font-size: 20px;
}
body {
  &:extend(.fontSize);
}

• Stylus

.fontsize
  font-size 20px
body
  @extend .fontSize

函数

• Sass

@function get-size($n) {
  @return $n * 10;
}
body {
  font-size: get-size(2);
}

• Less

body {
  font-size: max(10, 20);
}

• Stylus

get-size(n)
  n * 10
body
  font-size get-size(2)

总结

预处理器	优点	缺点
Sass	1.功能齐全2.可定制程度高3.可适用于所有场景	1.体积臃肿，语法复杂2.学习成本高
Less	1.语法简单，易于使用2.对于基础使用可快速开发	1.功能略少
Stylus	1.代码量极少，节省时间2.贴合 css 语法	1.功能少