LESS 和 SCSS 的区别

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样式 

SCSS支持条件语句，LESS不支持

SCSS可以使用if{}else，for循环等等，LESS不支持

示范：

 ​
 /* Sample Sass “if” statement */
  
 @if lightness($color) > 30% {
  
 } @else {
  
 }
  
 /* Sample Sass “for” loop */
  
 @for $i from 1 to 10 {
   .border-#{$i} {
     border: #{$i}px solid blue;
   }
 ​ 

应用外部css文件方式不同

SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件

示范：

 // 源代码：
 @import "_main.css";
 @import "_layout.css";
 @import "_text.css";
 ​ 

颜色函数

调整色相的话，LESS使用spin（）的函数；SCSS使用名为adjust_hue()的函数

示范：

LESS:

 @state-success-border: darken(spin(@state-success-bg, -10), 5%); 

SCSS:

 $state-success-border: darken(adjust_hue($state-success-bg, -10), 5%); 

引用父选择器&符号的使用

LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

示范：

LESS：

 .bg-variant(@color) {
   background-color: @color;
   a&:hover,
   a&:focus {
     background-color: darken(@color, 10%);
   }
 } 

SCSS:

 ​
 a {
   font-weight: bold;
   text-decoration: none;
   &:hover { text-decoration: underline; }
   body.firefox & { font-weight: normal; }
 } 

总结：

SCSS和LESS都是一种基于css之上的高级语言，两者之间各有优点，sass在功能上面比LESS更强大，LESS比较的清晰明了，容易上手，主要是看大家的工作中，更倾向于使用那个进行开发，两者都能够大大提高书写代码的效率