前言
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 编译环境
-
Less.js:
- Less 的官方 JavaScript 实现，可以在浏览器中实时编译 Less 文件。
- 适用于开发环境，但不推荐在生产环境中使用。
-
Less Command Line Tool:
-
Less 提供了一个命令行工具，可以在命令行中编译 Less 文件。
-
安装方法：通过 npm 安装
less包。css
代码解读
复制代码
npm install -g less -
使用方法：
css
代码解读
复制代码
lessc styles.less styles.css
-
-
构建工具集成:
- Less 可以与许多前端构建工具（如 Webpack、Gulp、Grunt 等）集成。
- 使用相应的插件或加载器，可以在构建过程中自动编译 Less 文件。
SCSS 编译环境
-
Dart Sass:
-
SCSS 的官方编译器，是用 Dart 语言编写的。
-
安装方法：通过 npm 安装
sass包。css
代码解读
复制代码
npm install -g sass -
使用方法：
css
代码解读
复制代码
sass input.scss output.css
-
-
Node-sass:
-
Node.js 的 SCSS 编译器，基于 LibSass。
-
安装方法：通过 npm 安装
node-sass包。css
代码解读
复制代码
npm install -g node-sass -
使用方法：
css
代码解读
复制代码
node-sass input.scss -o output.css
-
-
Ruby Sass:
-
最早的 SCSS 编译器，用 Ruby 语言编写。
-
需要先安装 Ruby 和 Sass gem。
-
使用方法：
css
代码解读
复制代码
sass input.scss output.css
-
-
构建工具集成:
- SCSS 也可以与前端构建工具（如 Webpack、Gulp、Grunt 等）集成。
- 使用相应的插件或加载器，可以在构建过程中自动编译 SCSS 文件。
总结
- Less 和 SCSS 都有官方的编译工具，分别是 Less.js 和 Dart Sass。
- Less 使用 Less Command Line Tool 或集成到构建工具中进行编译。
- SCSS 有多个编译器可供选择，包括 Dart Sass、Node-sass 和 Ruby Sass，同样可以集成到前端构建工具中。
使用场景
Less 使用场景
-
旧项目迁移：
- 对于已有的 Less 项目，继续使用 Less 是最直接的选择。
-
简单项目：
- 当项目规模较小，不需要复杂的功能时，Less 可以是一个简单和轻量级的选择。
-
团队偏好：
- 如果团队已经习惯使用 Less，并且没有特别的需求或偏好，可以继续使用 Less。
-
教育和学习：
- 对于 CSS 预处理器的初学者，Less 的语法和概念相对较简单，更容易入门。
SCSS 使用场景
-
新项目：
- 对于新的前端项目，特别是大型和复杂的项目，使用 SCSS 可能更为合适，因为它提供了更多的功能和控制。
-
现代开发环境：
- SCSS 通常与现代的前端构建工具（如 Webpack、Parcel、Gulp 等）更好地集成，可以方便地进行自动编译和优化。
-
复杂的 UI 框架和组件库：
- 对于需要频繁定制和扩展的 UI 框架和组件库，SCSS 的混合（Mixins）、嵌套规则和变量管理功能非常有用。
-
丰富的生态系统：
- SCSS 有一个庞大的社区和生态系统，提供了许多开源库、工具和插件，方便开发者使用和扩展。
-
高级功能需求：
- 如果项目需要高级的功能，如控制指令、内建函数、模块化等，SCSS 提供了更丰富的功能和选项。
总结
- Less 适合简单项目、旧项目迁移和团队偏好，以及对 CSS 预处理器较为陌生的开发者。
- SCSS 适合新项目、大型和复杂的项目、现代开发环境，以及需要高级功能和控制的项目。
作者：来颗奇趣蛋
链接：https://juejin.cn/post/7358688805157879845
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。