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

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

你可能感兴趣的:(CSS,css3,less,sass)