一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

LESS 和 SCSS 的区别

相同点：

1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
2. 都可以通过自带的插件，转成相对应的css文件。
3. 都可以参数混入，可以传递参数的class，就像函数一样
4. 嵌套的规则相同，都是class嵌套class

不同点：

声明和使用变量

LESS用@符号，SCSS用$符号表示

示范：

@link-color:#632bca
 $to-color:#632bca
 .main{
     color:@link-color   //#632bca颜色LESS
     background-color:$to-color  //#632bca颜色SCSS
 }

变量插值

LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式

作用： 可以用为LESS和SCSS声明变量，变量作为css的选择器

示范：

LESS:

@main-top : search;
 .@{ main-top } {
     font-size ： 24px；
     color : #fff;
 }
 // 是用LESS，定义类，类选择器选中search标签，给其设置css样式

SCSS:

$main-top : search;
.@{ main-top } {
	font-size ： 24px；
	color : #fff;
}
// 是用SCSS，定义类，类选择器选中search标签，给其设置css样式