Sass 和 Less 是两种主流的 CSS 预处理器（CSS Preprocessor），它们通过扩展原生 CSS 的语法，提供了变量、嵌套、混合（Mixins）、函数等高级功能，帮助开发者编写更高效、可维护的样式代码。以下是它们的详细介绍：

---

一、Sass（Syntactically Awesome Style Sheets）

1. 基本特性

• 语法形式：

  • SCSS（Sassy CSS）：兼容原生 CSS 语法，文件扩展名为 .scss（主流使用）。

  • 缩进语法（Indented Syntax）：省略大括号和分号，依赖缩进（类似 Python），文件扩展名为 .sass（较少使用）。

• 编译方式：

  • 需要将 .scss 或 .sass 文件编译为原生 .css。

  • 编译工具：node-sass（已弃用）、Dart Sass（官方推荐）、Webpack/Vite 插件等。

2. 核心功能

(1) 变量（Variables）

css">$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;body {color: $primary-color;font-family: $font-stack;
}

(2) 嵌套（Nesting）

css">.nav {background: #333;ul {padding: 0;li {display: inline-block;&:hover { background: #555; } // & 表示父选择器}}
}

(3) 混合（Mixins）

可重复使用的代码块，支持参数传递：

css">@mixin flex-center($direction: row) {display: flex;justify-content: center;align-items: center;flex-direction: $direction;
}.container {@include flex-center(column);
}

(4) 继承（Extend）

复用已有样式：

css">.button-base {padding: 10px 20px;border: none;
}.submit-button {@extend .button-base;background: green;
}

(5) 条件与循环

css">// 条件语句
@if $theme == 'dark' {background: #000;
} @else {background: #fff;
}// 循环
@for $i from 1 through 3 {.col-#{$i} { width: 100% / $i; }
}// 遍历列表
$colors: red, green, blue;
@each $color in $colors {.icon-#{$color} { fill: $color; }
}

(6) 模块化（Modules）

通过 @use 或 @import 引入其他文件：

css">// _variables.scss
$primary-color: #3498db;// main.scss
@use 'variables';
.header { color: variables.$primary-color; }

(7) 颜色函数

css">$color: #3498db;
.dark-bg { background: darken($color, 20%); }
.light-text { color: lighten($color, 30%); }

---

二、Less（Leaner Style Sheets）

1. 基本特性

• 语法形式：与原生 CSS 高度兼容，文件扩展名为 .less。

• 编译方式：

  • 通过 lessc（Node.js 工具）或 Webpack 插件编译为 CSS。

  • 支持浏览器端直接编译（开发环境使用）。

2. 核心功能

(1) 变量（Variables）

css">@primary-color: #3498db;
@font-stack: Helvetica, sans-serif;body {color: @primary-color;font-family: @font-stack;
}

(2) 嵌套（Nesting）

css">.nav {background: #333;ul {padding: 0;li {display: inline-block;&:hover { background: #555; }}}
}

(3) 混合（Mixins）

css">.flex-center(@direction: row) {display: flex;justify-content: center;align-items: center;flex-direction: @direction;
}.container {.flex-center(column);
}

(4) 继承（模拟）

Less 通过混合模拟继承：

css">.button-base() {padding: 10px 20px;border: none;
}.submit-button {.button-base();background: green;
}

(5) 函数与运算

css">@base-margin: 10px;
.box { margin: @base-margin * 2; 
}// 内置函数
@color: #3498db;
.dark-bg { background: darken(@color, 20%); }

(6) 条件与循环（通过递归实现）

css">// 条件语句
.mixin(@condition) when (@condition = true) {background: #000;
}// 循环
.loop(@counter) when (@counter > 0) {.col-@{counter} { width: 100% / @counter; }.loop(@counter - 1);
}
.loop(3);

---

三、Sass vs Less 对比

特性	Sass	Less
语法兼容性	SCSS 兼容 CSS，缩进语法差异较大	语法接近原生 CSS
编译环境	依赖 Dart/Node.js	依赖 Node.js（支持浏览器端编译）
功能丰富性	更强大（支持逻辑控制、模块化）	相对简单
社区与生态	更成熟，广泛用于大型项目	轻量级，适合快速开发
与框架集成	常用于 Vue/React 项目	Bootstrap 默认使用 Less
性能	编译速度较快（Dart Sass）	编译速度中等

---

四、适用场景

1. 选择 Sass：

   • 需要复杂逻辑（如循环、条件分支）。

   • 大型项目或团队协作，强调模块化。

   • 与现代框架（如 React、Vue）深度集成。

2. 选择 Less：

   • 项目轻量，快速上手。

   • 需要与 Bootstrap 配合使用。

   • 浏览器端实时编译（开发环境）。