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);
}
可以看到,两种方式虽然不同,但实现的功能是相同的。