Less和SCSS，哪个更好用？

前言

Less 和 SCSS 都是流行的 CSS 预处理器，它们的目的都是扩展 CSS 的功能，使样式表更具组织性、可维护性和可重用性。虽然它们有许多相似之处，但在语法、特性和工作方式上也存在一些差异。

Less

Less 是一种动态样式表语言，它是CSS预处理器之一。Less是一种向后兼容的CSS扩展，允许开发者使用类似于编程的方式来编写CSS。允许开发者使用变量、混合、嵌套规则等高级功能，以更有效、模块化的方式编写CSS，极大地提高了代码的可重用性和可维护性。

SCSS

SCSS（Sassy CSS） 是Sass（Syntactically Awesome Stylesheets）的一种语法，它是CSS预处理器之一。与Less类似，SCSS也提供了一系列强大的功能和特性，它保留了less的一系列优点如变量、混合、嵌套、运算等，同时也新增加了条件语句、循环、函数等高级功能。所以SCSS 更加适用于处理复杂项目中的样式需求， 可读，可重用性也更高。

语法差异

Less 引用变量的方式

在 Less 中，使用 @ 符号来定义和引用变量。

定义变量:

css

代码解读

复制代码

@primary-color: #3498db;

引用变量:

css

代码解读

复制代码

.button { color: @primary-color; }

SCSS 引用变量的方式

在 SCSS 中，使用 $ 符号来定义和引用变量。

定义变量:

css

代码解读

复制代码

$primary-color: #3498db;

引用变量:

css

代码解读

复制代码

.button { color: $primary-color; }

对比

• Less: 使用 @ 符号来定义和引用变量。
• SCSS: 使用 $ 符号来定义和引用变量。

混合

Less 混合（Mixins）

在 Less 中，混合使用 .class 来定义，并且通过 . 符号进行调用。

定义混合:

css

代码解读

复制代码

.border-radius(@radius) { border-radius: @radius; }

调用混合:

css

代码解读

复制代码

.button { .border-radius(5px); }

SCSS 混合（Mixins）

在 SCSS 中，混合使用 @mixin 来定义，并且通过 @include 指令进行调用。

定义混合:

css

代码解读

复制代码

@mixin border-radius($radius) { border-radius: $radius; }

调用混合:

css

代码解读

复制代码

.button { @include border-radius(5px); }

对比

• Less 混合:

  • 使用 .class 定义混合。
  • 使用 . 符号调用混合。
  • 参数传递使用 @ 符号。

• SCSS 混合:

  • 使用 @mixin 定义混合。
  • 使用 @include 指令调用混合。
  • 参数传递使用 $ 符号。

参数传递

• Less:

  css

  代码解读

  复制代码

  .border-radius(@radius) { border-radius: @radius; }

  参数传递使用 @ 符号。

• SCSS:

  css

  代码解读

  复制代码

  @mixin border-radius($radius) { border-radius: $radius; }

  参数传递使用 $ 符号。

调用混合

• Less:

  css

  代码解读

  复制代码

  .button { .border-radius(5px); }

  使用 . 符号调用混合。

• SCSS:

  css

  代码解读

  复制代码

  .button { @include border-radius(5px); }

  使用 @include 指令调用混合。

总结

• Less 和 SCSS 的混合功能都允许你将一组 CSS 属性封装到一个类或混合中，以便在其他选择器中重用。
• Less 使用 .class 来定义混合，并使用 . 符号进行调用，参数传递使用 @ 符号。
• SCSS 使用 @mixin 来定义混合，并使用 @include 指令进行调用，参数传递使用 $ 符号。

功能差异

• Less 提供了基本的预处理功能，如变量、混合和嵌套规则，适合于轻量级应用。

• SCSS 拥有更高级的功能，如条件语句、循环、函数等，更适合复杂的项目和大型应用。

编译环境

Less 编译环境

1. Less.js:

   • Less 的官方 JavaScript 实现，可以在浏览器中实时编译 Less 文件。
   • 适用于开发环境，但不推荐在生产环境中使用。

2. Less Command Line Tool:

   • Less 提供了一个命令行工具，可以在命令行中编译 Less 文件。

   • 安装方法：通过 npm 安装 less 包。

     css

     代码解读

     复制代码

     npm install -g less

   • 使用方法：

     css

     代码解读

     复制代码

     lessc styles.less styles.css

3. 构建工具集成:

   • Less 可以与许多前端构建工具（如 Webpack、Gulp、Grunt 等）集成。
   • 使用相应的插件或加载器，可以在构建过程中自动编译 Less 文件。

SCSS 编译环境

1. Dart Sass:

   • SCSS 的官方编译器，是用 Dart 语言编写的。

   • 安装方法：通过 npm 安装 sass 包。

     css

     代码解读

     复制代码

     npm install -g sass

   • 使用方法：

     css

     代码解读

     复制代码

     sass input.scss output.css

2. Node-sass:

   • Node.js 的 SCSS 编译器，基于 LibSass。

   • 安装方法：通过 npm 安装 node-sass 包。

     css

     代码解读

     复制代码

     npm install -g node-sass

   • 使用方法：

     css

     代码解读

     复制代码

     node-sass input.scss -o output.css

3. Ruby Sass:

   • 最早的 SCSS 编译器，用 Ruby 语言编写。

   • 需要先安装 Ruby 和 Sass gem。

   • 使用方法：

     css

     代码解读

     复制代码

     sass input.scss output.css

4. 构建工具集成:

   • SCSS 也可以与前端构建工具（如 Webpack、Gulp、Grunt 等）集成。
   • 使用相应的插件或加载器，可以在构建过程中自动编译 SCSS 文件。

总结

• Less 和 SCSS 都有官方的编译工具，分别是 Less.js 和 Dart Sass。
• Less 使用 Less Command Line Tool 或集成到构建工具中进行编译。
• SCSS 有多个编译器可供选择，包括 Dart Sass、Node-sass 和 Ruby Sass，同样可以集成到前端构建工具中。

使用场景

Less 使用场景

1. 旧项目迁移：

   • 对于已有的 Less 项目，继续使用 Less 是最直接的选择。

2. 简单项目：

   • 当项目规模较小，不需要复杂的功能时，Less 可以是一个简单和轻量级的选择。

3. 团队偏好：

   • 如果团队已经习惯使用 Less，并且没有特别的需求或偏好，可以继续使用 Less。

4. 教育和学习：

   • 对于 CSS 预处理器的初学者，Less 的语法和概念相对较简单，更容易入门。

SCSS 使用场景

1. 新项目：

   • 对于新的前端项目，特别是大型和复杂的项目，使用 SCSS 可能更为合适，因为它提供了更多的功能和控制。

2. 现代开发环境：

   • SCSS 通常与现代的前端构建工具（如 Webpack、Parcel、Gulp 等）更好地集成，可以方便地进行自动编译和优化。

3. 复杂的 UI 框架和组件库：

   • 对于需要频繁定制和扩展的 UI 框架和组件库，SCSS 的混合（Mixins）、嵌套规则和变量管理功能非常有用。

4. 丰富的生态系统：

   • SCSS 有一个庞大的社区和生态系统，提供了许多开源库、工具和插件，方便开发者使用和扩展。

5. 高级功能需求：

   • 如果项目需要高级的功能，如控制指令、内建函数、模块化等，SCSS 提供了更丰富的功能和选项。

总结

• Less 适合简单项目、旧项目迁移和团队偏好，以及对 CSS 预处理器较为陌生的开发者。
• SCSS 适合新项目、大型和复杂的项目、现代开发环境，以及需要高级功能和控制的项目。

作者：来颗奇趣蛋
链接：https://juejin.cn/post/7358688805157879845
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。