SASS VS LESS VS Stylus

为何要做CSS Pre-processors?

没有人做吃力不讨好的工作嘛，有了多种不同的CSS Pre-Processors那么代表着它们一定带来了不同好处，问题是，带来了什么好处呢？最吸引开发者的好处是什么？它们有什么异同呢？如果公司做技术选型的时候最好选择哪一种呢？

好处
  • 浏览器前缀处理
  • 复用的效率提升
    • 变量
    • mixin
  • 嵌套书写，不用写重复的选择器

三个最知名的工具

简单比较

FeaturesSASSLessStylus
变量 $开头 @开头 变量和值之间用等号
学习成本 中等 相近CSS，最小 中等
语法 缩进式(3.0+支持{}) {} ？
作用域 没有全局变量 向上查找 向上查找
mixin @mixin+@include 直接调用 直接调用

重点特性

mixin
sass

申明：@mixin
调用：@include

/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  @include error();/*直接调用error mixins*/
}
.login-error {
  @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
less

申明：对比sass，申明没有@mixin
调用：对比sass，调用没有@include

/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}
stylus

申明：对比less，申明的时候没有‘.’
调用：直接函数调用

/*声明一个Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  error();/*直接调用error mixins*/
}
.login-error {
  error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/
}
继承
sass && stylus

调用：@extend
生成代码：它是在父亲上直接把子选择器加上，所以代码没有冗余

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}
less

调用：直接
生成代码：它是copy的孩子的属性中，所以产生了冗余

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}
颜色函数
sass
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)
less
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)
stylus
lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */  

red(color)
green(color)
blue(color)
alpha(color)
dark(color)
light(color)
hue(color)
saturation(color)
lightness(color)
if
sass
.mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
    background-color: white;
}
less
@if lightness($color) > 30% {
    background-color: black;
}

@else {
    background-color: white;
}
stylus
if lightness(color) > 30%
    background-color black
else
    background-color white
for && loop
sass
@for $i from 1px to 3px {
    .border-#{i} {
        border: $i solid blue;
    }
}
less
.loop(@counter) when (@counter > 0){
    .loop((@counter - 1));

    .border-@{counter} {
        border: 1px * @counter solid blue;
    }
}
stylus
for num in (1..3)
    .border-{num}
        border 1px * num solid blue
导入

@import

原始文件

/* file.{type} */
body {
  background: #EEE;
}

引用

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}
& 选择父亲
section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

Sass VS Scss

  • Sass是（Syntactically Awesome StyleSheets），后缀.sass文件
  • Scss是（Sassy CSS），后缀.scss文件

all features are available for both syntaxes

  • Scss兼容CSS，语法类似，Less的学习和入手优势被抵消掉了
  • CSS文件，直接就是合法的Scss文件
  • Scss可以转化为Sass，相对容易
  • Scss和Sass在功能上基本能做到1：1映射

结论

如果喜欢原生的CSS语法，选择less比较好上手，stylus用的人数不足，但是它其实部分兼容sass和less的开发者群体，一个全新的项目尝试一下新事物也没有问题，如果喜欢更强的功能那么就scss（变量作用域有点儿蛋疼）走起吧。
中国的互联网团队，用less稍微多点（知乎搜索的结果来看），国外的sass用户更多，而且文档、样例更加丰富。

参考

posted @ 2018-06-06 16:34  olojiang  阅读(1126)  评论(0)  编辑  收藏  举报