Sass、Less、PostCSS

下面，我们来系统的梳理关于 Sass、Less、PostCSS 的基本知识点：

---

一、CSS 预处理与后处理概述

1.1 现代 CSS 开发工具链

源文件 (Sass/Less) → 预处理器 (编译) → 标准 CSS → 后处理器 (PostCSS) → 优化后的 CSS

1.2 核心工具对比

特性	Sass	Less	PostCSS
类型	预处理器	预处理器	后处理器
语法	.scss / .sass	.less	标准 CSS
核心功能	变量、嵌套、混合等	变量、嵌套、混合等	插件扩展功能
扩展性	中等	中等	极高（插件系统）
编译方式	Dart Sass / Node Sass	JavaScript	JavaScript
学习曲线	中等	简单	依赖插件复杂度

1.3 应用场景

• Sass/Less：解决 CSS 缺乏编程能力的问题
• PostCSS：解决浏览器兼容性、代码优化等问题

二、Sass 深度解析

2.1 安装与使用

# 安装 Dart Sass (推荐)
npm install sass --save-dev# 编译 Sass 文件
npx sass input.scss output.css# 监听文件变化
npx sass --watch input.scss:output.css

2.2 核心特性

变量系统

// 定义变量
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;// 使用变量
body {font-family: $font-stack;color: $primary-color;
}

嵌套规则

nav {ul {margin: 0;padding: 0;list-style: none;li {display: inline-block;a {display: block;padding: 6px 12px;text-decoration: none;}}}
}

混合（Mixins）

@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.button {@include border-radius(10px);
}

继承（Extend）

%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {@extend %message-shared;border-color: green;
}

函数与运算

@function calculate-width($col-span) {@return 100% / $col-span;
}.column {width: calculate-width(4); // 25%height: 100px - 20px; // 80px
}

控制指令

$theme: "dark";body {@if $theme == "dark" {background-color: #333;color: #fff;} @else {background-color: #fff;color: #333;}
}@for $i from 1 through 3 {.item-#{$i} { width: 100px * $i; }
}$sizes: 40px, 50px, 80px;@each $size in $sizes {.icon-#{$size} {font-size: $size;}
}

2.3 模块化系统

// _variables.scss
$primary-color: #3498db;// _mixins.scss
@mixin flex-center {display: flex;justify-content: center;align-items: center;
}// main.scss
@use 'variables' as vars;
@use 'mixins';.container {@include mixins.flex-center;background-color: vars.$primary-color;
}

三、Less 深度解析

3.1 安装与使用

# 安装 Less
npm install less --save-dev# 编译 Less 文件
npx lessc input.less output.css# 监听文件变化
npx less-watch-compiler less css

3.2 核心特性

变量系统

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

嵌套规则

nav {ul {margin: 0;padding: 0;list-style: none;li {display: inline-block;a {display: block;padding: 6px 12px;text-decoration: none;}}}
}

混合（Mixins）

.border-radius(@radius) {-webkit-border-radius: @radius;-moz-border-radius: @radius;border-radius: @radius;
}.button {.border-radius(10px);
}

命名空间

#bundle() {.button {display: block;border: 1px solid black;background-color: grey;}
}#header a {color: orange;#bundle.button();  // 混合 #bundle 中的 .button
}

函数与运算

@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%.calc {width: calc(100% - (@base * 10)); // 50%
}

3.3 Sass 与 Less 对比

特性	Sass	Less
变量符号	$	@
混合定义	@mixin / @include	.class / .class()
条件语句	@if, @else	通过 guards 实现
循环	@for, @each, @while	递归混合实现
模块系统	@use