从 SASS 到 LESS：一个编译器的经验分享-JavaScript中文网-JavaScript教程资源分享门户

从 SASS 到 LESS：一个编译器的经验分享

前端开发中，样式表一直是一个比较麻烦的问题。随着 CSS 预处理器的出现，前端开发者们的工作变得更加高效和简单。其中，SASS 和 LESS 可谓是两个最为流行的 CSS 预处理器。但是，有时候我们需要从一个预处理器转换到另一个，这时候就需要一个编译器去完成这个转换的过程。在这篇文章中，我们将分享一个编译器的使用经验，帮助你顺利从 SASS 到 LESS 的转换。

SASS 和 LESS 的比较

首先，让我们来看一下 SASS 和 LESS 的区别。

SASS 与 LESS 的语法非常相似，它们都具有一些共同的特点：

嵌套：可以将子元素的样式规则嵌套在父元素的样式规则中，使代码更加简洁易懂。
变量：通过给颜色、距离和大小定义一个变量，可以使代码更加易于维护和修改。
循环：可以用循环为一组属性设置不同的值。
mixin：可以创建一组样式，并在需要的地方调用它们。
继承：可以继承一个选择器的样式，并将其应用于另一个选择器。

尽管 SASS 和 LESS 有很多相似之处，但它们的语法还是存在一些差异。下面是一些 SASS 和 LESS 的差异之处：

SASS 使用的是“@”符号，而 LESS 使用的是“#”符号。
在 SASS 中，可以用“=”符号给变量赋值，而在 LESS 中则不行。
在 SASS 中，用“+”符号来定义 mixin，而在 LESS 中则使用“.”。
SASS 中可以用“&”符号来引用父元素，而 LESS 中则是“:extend”。

迁移过程

如果你需要从 SASS 转到 LESS，以下是一些迁移的步骤：

1）熟悉 LESS 语法和特性，把 SASS 代码表达成 LESS 代码。

2）使用编译器将 LESS 代码编译成 CSS，可以使用官方的 lessc 命令行工具，也可以使用一些其他的在线或本地编译器。

3）更改页面中的 CSS 样式。

接下来，我们将着重介绍一些比较重要的差异点。

变量

在 SASS 中，我们可以使用下面的语法定义一个变量：

$example: #333;

在 LESS 中，则是这样的：

@example: #333;

因此，在变量的定义方面，你需要做的是将“$”字符替换为“@”字符，将 SASS 样式表中的变量替换为 LESS 样式表中的变量。

mixin

在 SASS 中，我们可以使用以下语法来定义 mixin：

=example($font-size, $font-weight)
  font-size: $font-size;
  font-weight: $font-weight;

在 LESS 中，则是这样的：

.example(@font-size, @font_weight) {
  font-size: @font-size;
  font-weight: @font_weight;
}

同样地，你需要做的是将 mixin 的定义替换为 LESS 的 mixin 定义。

继承

在 SASS 中，使用以下语法可以继承一个选择器的样式

.example {
  font-size: 16px;
}

.demo {
  @extend .example;
}

在 LESS 中，使用下面的语法来实现同样的效果：

.example {
  font-size: 16px;
}

.demo:extend(.example) {}

可以看到，LESS 中的选择器扩展需要在后面加上括号，这是一个显著的差异点。

混合

LESS 中没有 SASS 中用的 @content，所以必须使用 LESS 中的 ruleset 来出替 SASS 的 @content。以下是一个例子：

SASS：

-- -------------------- ---- -------
------ ------------------ -
  ------ ----------- ------ -
    -------- -------
  -
-
------------- -
  ----------- ----

  -------- ---------- -
    ----------- ------
  -
-

LESS：

-- -------------------- ---- -------
---------------- -- -
  ------ ----------- ------ -
    - -
      -----------
    -
  -
-
------------- -
  ----------- ----

  ------------------ -
    ----------- ------
  -
-

总结

尽管 SASS 和 LESS 都是 CSS 预处理器，但两者之间有很多差异。当你需要从一个预处理器转换到另一个时，需要使用编译器完成转换的过程。在本文中，我们介绍了一些从 SASS 到 LESS 的差异点，包括变量、mixin、选择器扩展和混合等。通过这些差异点的了解，你可以更加轻松地迁移到 LESS，并通过少量的修改将 SASS 代码转换成 LESS 代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648afa0048841e9894957539