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 Scss “if” statement */
$color: #555;   // 定义color变量
 
@if lightness($color) > 30% {
  .bright {
    color: $color;
  }
} @else {
  .dark {
    color: $color;
  }
}
 
/* Sample Scss “for” loop */
 
@for $i from 1 through  10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }

应用外部css文件方式不同

SCSS 的部分文件名通常以 ‘_’ 开头（下划线）。文件名以下划线开头的话，Scss 会认为该文件是一个部分文件，不会将它单独编译成 CSS 文件。

示范：

// 导入部分文件
@import "main";
@import "layout";
@import "text";

颜色函数

调整色相的话，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 的预处理器，能够提供更多的功能和语法来增强 CSS 的编写效率和灵活性。选择使用哪种预处理器通常取决于个人偏好和项目需求。

• 功能和语法：SCSS 拥有更丰富的功能和语法，支持条件语句、循环、函数等高级特性，使得它更适合于复杂和大型项目的开发。LESS 相对较简单，语法更加清晰明了，适合于快速上手和简单项目的开发。

• 生态和社区：SCSS 的生态系统更为成熟，有更多的第三方库和工具支持，社区活跃度较高。LESS 虽然也有一定的社区支持，但相较于 SCSS 来说规模较小。

• 使用场景：在选择使用预处理器时，可以根据项目的复杂度和团队的熟悉程度进行考量。对于需要更多功能和扩展性的项目，推荐使用 SCSS；对于需要快速开发和简单维护的项目，LESS 是一个不错的选择。

补充：

• 编译器支持：无论是 SCSS 还是 LESS，都需要通过编译器将其转换为浏览器可以理解的 CSS 文件。

• 学习曲线：虽然 SCSS 功能更强大，但也意味着学习曲线可能更陡峭。LESS 的简单和直观语法可以帮助开发者更快速地上手和应用。

• 选择 SCSS 还是 LESS 取决于团队的技术栈选择和个人偏好，可以根据项目需求灵活选择使用。