你知道LESS 和 SCSS 的区别吗？哪个更适合你？

站长

2024年03月23日 18:37 · 阅读数 3

前言

LESS（Leaner Style Sheets）和SCSS（Sassy CSS）都是CSS预处理器，它们在原生CSS的基础上提供了额外的功能和语法，以使样式表的编写更加模块化、可维护和灵活。虽然它们的目标相似，但它们在语法和功能上有一些区别。本篇文章旨在让大家了解 LESS 和 SCSS 这两种工具的特点，分清二者的区别和特性，让大家能够选择出更适合的那一个。

简单介绍一下LESS 和 SCSS

LESS（编写简单且简洁）

LESS（Leaner Style Sheets）通过提供类似编程的方式来编写 CSS，扩展了原生 CSS 的功能。LESS 引入了诸如变量、混合（类似函数）、嵌套规则等特性，极大地提高了代码的可重用性和可维护性。LESS 与原生 CSS 兼容，可以通过编译器将 LESS 代码转换为普通的 CSS 代码，然后在浏览器中使用。因此，LESS 不仅保留了 CSS 的简单性和灵活性，还提供了更多强大的工具和特性，使得样式表的编写更加高效、灵活，并且更容易维护和复用。

SCSS（功能丰富且强大）

Sass 从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的CSS代码，这意味着任何有效的 CSS 代码都是合法的 SCSS 代码，这一代的Sass也被称为SCSS。SCSS 不仅保留了 LESS 的所有优点，还增加了更高级的功能，如条件语句、循环、函数等更高级的功能，使得样式表的编写更加灵活、强大，所以SCSS 更加适用于处理复杂项目中的样式需求。

LESS 和 SCSS 的区别

1. 实现方式

Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

2. 变量的声明和使用

Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。

//Less定义变量： 
 
@color: #4D926F;
 
div {
color: @color;
}
 
//Scss定义变量
 
$blue : #1875e7;　
 
div {
　color : $blue;
}

3. 变量插值

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

//Less
@primary-color: #333;
background-color: @{primary-color};

//Scss
$primary-color: #333;
background-color: #{$primary-color};

条件语句、循环、函数

SCSS 中增加了条件语句(if、if...else)和循环语句(for循环、while循环)还有自定义函数，LESS不支持。

// if...else
$primary-color: #333;

button-style {
  @if $primary-color == #333 {
    background-color: red;
  } @else {
    background-color: blue;
  }
}

//for循环
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

//自定义函数
@function double($number) {
  @return $number * 2;
}

.element {
  width: double(50px);
}

混合(Mixins)

定义 Mixin

LESS 使用 .mixinName() {} 的语法定义来定义一个 Mixin，并且可以把任意的 CSS 规则作为 Mixin 使用

.mixinName() { property: value; }。

在 SCSS 中，Mixin使用 @mixin 关键字定义。

@mixin mixinName { property: value; }。

Mixin的调用

在 LESS 中，Mixin的调用使用.运算符，并且如果 Mixin 没有参数的话可以省略后面的圆括号

// 定义 Mixin
.buttonMixin(@color) {
  background-color: @color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

// 调用 Mixin
.button {
  .buttonMixin(blue);
}

在 SCSS 中，Mixin的调用使用 @include 指令

// 定义 Mixin
@mixin button($color) {
  background-color: $color;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

// 调用 Mixin
.button {
  @include button(blue);
}

Mixin的参数传递

如果存在多个参数的话，LESS 使用分号分隔；SCSS 使用逗号分隔，且两者都支持为参数设置默认值。

// less
.mixinName(@param1; @param2) {
  // Mixin 内部代码
}

// 调用 Mixin 并传递多个参数
.element {
  .mixinName(value1; value2);
}

//scss
@mixin mixinName($param1, $param2) {
  // Mixin 内部代码
}

// 调用 Mixin 并传递多个参数
.element {
  @include mixinName(value1, value2);
}

函数

1. 字符串函数

尽管SCSS和LESS都提供了字符串函数，但它们在一些细节上有所不同。

在LESS中，可以使用e()函数或~"string"语法来进行CSS转义。例如，e("@{variable}")会将变量转义为CSS字符串。
在SCSS中，并没有提供专门的CSS转义函数。相反，可以使用变量插值来实现相同的效果，如#{$variable}
SCSS通常提供更多的字符串函数，如str-insert()、str-slice()等，使得对字符串的操作更加灵活。

假设我们想在CSS中使用一个包含特殊字符的字体名称，比如含有空格或者引号的字体名称。

在LESS中，我们可以使用~"string"语法来转义：

@font: ~"Times New Roman";

而在SCSS中，我们可以使用变量插值来达到相同的效果：

$font: "Times New Roman";
body {
  font-family: #{$font};
}

这样做可以确保特殊字符在生成的CSS中被正确保留，而不会被解释为其他含义。

2. 颜色函数

调节色相，LESS 使用名为 spin() 的函数；SCSS 使用名为 adjust_hue() 的函数。

@base-color: #ff0000; .new-color { color: spin(@base-color, 120deg); // 将基础颜色旋转120度 }

$base-color: #ff0000; $new-color { color: adjust-hue($base-color, 120deg); // 将基础颜色旋转120度 }

引用父选择器 & 符号

在 SCSS 和 LESS 中，& 符号用于引用父选择器，通常在嵌套规则中使用。但是 SCSS 的 & 符号只能出现在一个组合选择器的开始位置，LESS 则没有这个限制。

// less
.bg-v(@color) {
  background-color: @color;
  a&:hover,
}

// scss
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

继承方式

在 LESS 中，使用 :extend() 函数来继承样式，继承的目标选择器需要作为参数传递给函数。
在 SCSS 中，使用 @extend 指令来继承样式，使用指令时，只需要指定要继承的目标选择器即可。

在LESS中：

// 定义基础样式
.base-style {
  color: blue;
}

// 继承基础样式
.child-style {
  &:extend(.base-style);
}

在SCSS中：

// 定义基础样式
.base-style {
  color: blue;
}

// 继承基础样式
.child-style {
  @extend .base-style;
}

总结 🌸🌸🌸

LESS 和 SCSS 都是非常优秀的CSS预处理器，SCSS 在功能上面比 LESS 更强大，LESS 却更简洁，容易上手，最重要的是两者都可以提高CSS代码的可读性和可维护性。看完这篇文章，了解清楚二者之间的区别，在之后我们可以根据自己的需求选择适合自己的预处理器。

感谢各位小伙伴的阅读，最后祝你也祝我在今后日子里能够登高望远，心向彼岸😜😜😜