Vue使用Less和Sass的区别

Vue使用Less和Sass的区别

本文将从如下四个方面详细阐述Vue使用Less和Sass的区别：

一、选择器

在Less中，选择器采用的是"&"符号，用于连接选择器，如下所示：

.parent {
  .child {
    color: #333;
  }
}

在Sass中，选择器通过"#"和"."进行连接，如下所示：

.parent {
  .child {
    color: #333;
  }
}

从这个角度上来看，两种方式没有实质性的区别。

二、变量和函数

在使用Less时，变量以“@”开头，例如:

@text-color: #333;
.parent {
  color: @text-color;
}

在使用Sass时，变量以“$”开头，例如：

$text-color: #333;
.parent {
  color: $text-color;
}

从代码的感官来看，两者并没有大的不同，不过值得注意的是Less中有函数，如下所示:

@font-size: 16;
.parent {
  font-size: percentage(@font-size / 12);
}

在Sass中，采用的是"percentage"而不是percentage()，需要注意。

三、导入

在Less中，导入其他文件是通过

@import "base.less";

而在Sass中，导入的方式是：

@import "base.scss";

实质上，两者采用的方式相同，只是文件扩展名不同而已。

四、混入

在Less中，混入通过.的方式进行，如下示例：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  border-radius: @radius;
}

.parent {
  .border-radius(10px);
}

而在Sass中，混入采用了@include的方式，如下示例：

@mixin border-radius($radius: 5px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.parent {
  @include border-radius(10px);
}

可以看到，两种方式虽然不同，但实现的功能是相同的。