css预处理器less和sass

目录

        什么是 CSS 预处理器？

        安装

1. less：CSS预处理器

2. less-loader：Webpack加载器

---

什么是 CSS 预处理器？

CSS 预处理器是一种通过扩展 CSS 语法来提升开发效率的工具。它允许开发者使用变量、嵌套、混合宏（Mixins）、函数等高级功能编写样式，最终编译为标准 CSS。主流的预处理器包括 Less 和 Sass，两者都能显著减少代码冗余，增强可维护性。

Less官网

Sass官网

安装

//less安装
npm i less less-loader
//sass安装
npm i sass sass-loder

1. less：CSS预处理器

less 是一个 CSS 预处理器，它允许你使用变量、嵌套、混合宏等功能，增强原生 CSS 的功能。安装 less 后，你可以编写 .less 文件并使用 less 命令行工具手动将 .less 文件转换为 .css 文件。

2. less-loader：Webpack加载器

less-loader 是一个专门用于 Webpack 的加载器，它将 less 文件集成到 Webpack 的构建流程中。当你在项目中使用 Webpack 构建时，less-loader 会自动处理 .less 文件的编译工作，将它们转换为标准的 .css 文件，然后通过 Webpack 继续打包。