透析主流CSS预处理器的区别

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）

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

(2) 嵌套（Nesting）

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

(3) 混合（Mixins）

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

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

(4) 继承（Extend）

复用已有样式：

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

(5) 条件与循环

// 条件语句
@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 引入其他文件：

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

(7) 颜色函数

$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）

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

(2) 嵌套（Nesting）

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

(3) 混合（Mixins）

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

(4) 继承（模拟）

Less 通过混合模拟继承：

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

(5) 函数与运算

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

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

// 条件语句
.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）	编译速度中等