文章目录
- 一、Sass、SCSS、Less 是什么？
- 二、为什么要引入这些预处理器？
- 三、编译方式
一、Sass、SCSS、Less 是什么？
它们都是CSS 预处理器（CSS Preprocessor）—— 本质是对原生 CSS 的 “增强版语法”，通过编译器最终会编译成标准
CSS 文件，让 CSS 编写更高效、可维护。
核心定义
Sass: 最早的 CSS 预处理器之一
有两种语法：
① 缩进式（Sass）：无大括号 / 分号，依赖缩进
② SCSS（Sassy CSS）：类 CSS 语法，兼容原生 CSSSCSS: Sassy CSS 是 Sass 的升级版语法（Sass 3.0 推出），完全兼容 CSS，用大括号 / 分号，是目前 Sass 的主流写法（日常说 “Sass” 通常指 SCSS）
Less: Leaner Style Sheets,轻量易上手，JS 开发（可通过 Node / 浏览器编译） 类 CSS 语法，兼容原生 CSS，学习成本最低
直观对比（实现 “变量定义”）
原生 CSS（无变量，重复写值）：
.btn{color:#4285f4;}.card{border-color:#4285f4;}SCSS/Sass：
// SCSS（主流） $primary-color:#4285f4; .btn{color:$primary-color;}.card{border-color:$primary-color;}// 缩进式Sass（老式写法） $primary-color:#4285f4 .btncolor:$primary-color .cardborder-color:$primary-colorLess：
@primary-color:#4285f4;.btn{color:@primary-color;}.card{border-color:@primary-color;}二、为什么要引入这些预处理器？
原生 CSS 是静态、无逻辑、重复度高的标记语言，缺乏编程化特性，预处理器解决了这些痛点，核心价值是：- 解决 “重复代码” 问题：使用变量（Variables）
把常用的颜色、字体、尺寸等定义为变量，一处修改、全局生效，避免反复复制粘贴。
例（Less）：
@font-size:14px;@main-color:#2c3e50;body{font-size:@font-size;color:@main-color;}- 简化嵌套层级：嵌套（Nesting）
原生 CSS 写嵌套选择器需要重复写父级，预处理器可嵌套书写，结构更清晰：
SCSS嵌套：
.nav{width:100%; li{float:left; a{color:#333; &:hover{color:red;}// & 代表父级（a）}}}// 编译后原生CSS .nav{width:100%;}.nav li{float:left;}.nav li a{color:#333;}.nav li a:hover{color:red;}- 复用代码块：混合 / 混入（Mixins）
把重复的样式片段封装成 “函数”，可传参，避免冗余：
SCSS Mixin（带参数）
@mixinflex($justify:center,$align:center){display:flex;justify-content:$justify;align-items:$align;}.box{@includeflex(flex-start,center);}// 调用 .card{@includeflex;}// 使用默认值- 样式继承：扩展（Extend）
复用已有选择器的样式，减少冗余：
scss
.base-btn{padding:8px 16px;border-radius:4px;}.primary-btn{@extend.base-btn;background:#4285f4;color:white;}.danger-btn{@extend.base-btn;background:#dc3545;color:white;}- 动态计算：运算（Operations）
支持加减乘除、颜色运算，适配响应式 / 主题：
less
@base-width:200px;.container{width:@base-width* 2;}// 400px .text{color:#333 + #111;}// #444（颜色运算）- 模块化管理：导入（Import）
原生 CSS 的@import会触发额外 HTTP 请求，预处理器的@import是 “编译时合并”，可拆分样式文件（如reset.scss、variables.scss），便于维护：
scss
@import"variables";// 导入变量文件@import"reset";// 导入重置样式@import"components/btn";// 导入组件样式- 高级特性：条件 / 循环（仅 Sass）
Sass 支持@if/@for/@each等逻辑，适合复杂主题 / 组件开发：
scss
// 循环生成尺寸类@for$i from 1 to 5{.size-#{$i}{font-size:12px + $i * 2;}}// 编译后：.size-1{font-size:14px;}... .size-4{font-size:20px;}三、编译方式
开发工具（VSCode + Easy Sass/Less 插件）自动编译；
构建工具（Webpack/Vite）通过sass-loader/less-loader编译；
浏览器端（Less 可直接引入less.js）：仅调试用，生产环境需编译为 CSS。
总结：Sass/SCSS/Less 本质是提升 CSS 的工程化能力，通过编程化特性（变量、嵌套、复用、运算）解决原生
CSS“难维护、冗余多、无逻辑” 的问题，尤其在中大型项目中，能显著降低开发成本、提升可维护性。
