Less、scss、stylus 对比

都有变量、混入、函数、嵌套、继承、颜色函数等的概念。

一、关于声明变量

Less使用@变量名：值
Scss使用$变量名：值
Stylus使用 变量名=值，$可加可不加

二、关于作用域

Scss没有全局作用域的概念，在Sass样式中定义变量，调用变量是没有全局变量一个概念存在，因此在Sass中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。

Less和Styuls中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。

三、关于混合——Mixins

为公用的CSS样式定义一个Mixins，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。

1、Scss的混合：

Sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号：分开。

调用时使用“@include”，然后在其后紧跟你要调用的Mixins名。

/*声明一个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*/
}

2、Less的混合：

在Less中可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号：分隔开。

调用时直接.mixinName()。

/*声明一个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*/
}

3、Stylus的混合：

可以不使用任何符号，就是直接声明Mixins名，然后在定义参数和默认值之间用等号=来连接。

/*声明一个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*/
}

四、关于嵌套

嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。

使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号｛｝里写这些元素。同时可以使用“&”符号来引用父选择器。对于Scss、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说，他们都具有相同的语法：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}

五、关于继承

1、Sass和Stylus的继承

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

编译为CSS后代码如下：

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}	

2、Less的继承

LESS支持的继承和Scss与Stylus不一样，他不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。
这种方法的缺点就是在每个选择器中会有重复的样式产生。

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

编译为CSS后代码如下：

.block {
  margin: 10px 5px;
  padding:2px;
}
p {
  margin: 10px 5px;
  padding:2px;
  border: 1px solid #eee
}
ul,ol {
  margin: 10px 5px;
  padding:2px;
  color:#333;
  text-transform:uppercase;
}	

六、关于运算符

Less可以对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。

Scss在数字运算上要比LESS更专业，他可以直接换算单位了。Scss可以处理无法识别的度量单位，并将其输出。

Stylus的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。

七、关于颜色函数

Scss、LESS和Stylus都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。

八、关于导入

在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。

但是，如果你是通过“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。

注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

九、关于判断语句 if 和 循环语句 for

Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层。

参考：https://blog.csdn.net/ly2983068126/article/details/77737292