👗 Sass 学习路线
85 个互动教程
Sass 入门 — CSS 预处理器
Sass：变量、嵌套、混入，让 CSS 更强大
Sass 变量运算
$变量 + 数学运算
Sass 运算
Sass 数学运算完全指南
Sass 嵌套规则
嵌套选择器 + & 父选择器 + BEM
Sass @each 遍历
@each 批量生成类
Sass Maps数据结构
学习Sass中Sass Maps数据结构 — Sass教程的详细用法和最佳实践
Sass @extend 继承
%placeholder 共享样式避免重复
Sass 颜色函数
lighten/darken/mix/adjust-hue
Sass 响应式Mixin
Sass 响应式 Mixin 开发指南
Sass 自定义函数
学习Sass中Sass 自定义函数 — Sass教程的详细用法和最佳实践
Sass 调试
学习Sass中Sass 调试 — Sass教程的详细用法和最佳实践
Sass %placeholder深入
学习Sass中Sass %placeholder深入 — Sass教程的详细用法和最佳实践
Sass @mixin 混入
@mixin + @include 复用样式块，传参
Sass 自定义函数
@function + @return 计算值
Sass @import/@use 模块化
拆分包文件，@use 加载模块
Sass @warn 警告指令
学习使用 @warn 指令在编译时发出自定义警告信息。
Sass @error 错误指令
学习使用 @error 指令在编译时抛出错误并终止编译。
Sass 插值语法
学习使用 #{} 插值语法在选择器、属性名和字符串中嵌入变量。
Sass 选择器嵌套
学习使用 Sass 的选择器嵌套来编写更清晰、层级分明的样式。
Sass 属性嵌套
学习使用 Sass 的属性嵌套语法简化带命名空间的 CSS 属性书写。
SCSS 变量与嵌套
SCSS变量定义（$前缀）、变量作用域、嵌套规则（选择器嵌套/父选择器&）、属性嵌套（font: { size: ... }）、命名空间
Sass 字符串函数
学习使用 Sass 内置字符串函数进行字符串操作。
Sass 列表函数
学习使用 Sass 列表函数操作和遍历列表数据。
用Sass构建3D矩阵变换引擎
讲解如何利用Sass的列表操作、数学函数和混入（mixin）生成任意3D透视变换矩阵，实现无需JavaScript的纯CSS3D变形。
私有模块与命名空间隔离术
深入Sass模块系统（@use, @forward），讲解如何创建拥有私有变量/函数的模块，并利用配置层实现全局命名空间隔离，适合大型项目架构。
SCSS @import vs @use 模块化
SCSS模块化：@import（已废弃）vs @use（推荐）、@forward转发、命名空间、私有成员（_前缀）、配置模块with关键字、sass模块系统最佳实践
基于变量本能的智能继承（Intrinsic @extend）
讲解决定Sass @extend是否生效的底层逻辑——当选择器满足特定变量条件时自动继承，实现类似『智能模板』的代码复用。
SCSS 实用函数与技巧
SCSS实用技巧：@debug/@warn/@error调试、@at-root跳出嵌套、字符串插值#{}、条件样式生成、自动化主题系统、BEM命名辅助mixin
按需生成实用类：动态映射循环引擎
利用Sass的多重映射（map）和循环嵌套，根据输入配置自动生成所有排列组合的实用类（如.mt-1、.mt-2），并支持响应式断点。
纯Sass生成流体排版：clamp()的数学降维
讲解如何不借助JavaScript，而是在Sass中通过解方程精确计算最小、最大视口下的clamp()值，并封装为高复用混入。
Sass运行时断言与优雅降级
探索@error、@warn、@debug在元编程中的深度用途，创建类型检查、参数校验及强制降级策略，让编译器成为你的『代码审查官』。
元编程：用哈希映射自动生成BEM命名系统
利用Sass的嵌套映射和字符串插值，构建一个自动化的BEM（Block Element Modifier）生成器，只需定义结构即可输出完整类名与样式。
基于容器查询的响应式宽高比锁定器
不用padding hack，而是使用Sass动态生成@container规则，实现元素根据容器尺寸而非视口锁定宽高比，适配最新CSS Containment。
语义化色彩系统：从设计令牌到主题切换
构建一个基于HSL和CSS变量的色彩主题引擎，Sass负责生成语义令牌（如--color-primary）并支持通过单个变量切换主题。
自定义编译器：用Sass编写自己的CSS预处理器插件
通过Sass的@function和@mixin实现类似PostCSS插件的功能，如自动添加浏览器前缀、单位转换、样式重置注入，成为Sass元编程的终极实践。
Sass 数学函数与复杂计算的工程化应用
通过 Sass 内置数学函数实现响应式网格、流体排版与动态间距的自动计算，超越简单变量运算。
基于 Sass Maps 的配置驱动样式模式
利用多层嵌套 Map 管理主题、断点和组件变体，通过函数和混入实现声明式配置。
深入 Sass 模块系统：设计可扩展的私有 API
利用 @use、@forward 和配置变量创建组件库的私有与公有接口，控制样式暴露粒度。
Sass 插值模板：动态生成选择器与属性
超越变量插值，使用 #{ } 在混入参数和循环中构建动态选择器、属性名甚至属性值公式。
Sass 流程控制指令：条件与循环的实际设计模式
使用 @if/@else、@for、@each、@while 构建响应式生成器、状态系统与自动化工具。
Sass 与 CSS 自定义属性协同：构建运行时动态主题
利用 Sass 编译时能力生成结构，结合 CSS 自定义属性实现运行时可切换主题。
构建 Sass 自定义函数：实现无法预定义的实用工具
从数学转换到字符串处理，创建可复用的自定义 Sass 函数扩展官方能力。
Sass 占位符选择器与 @extend：高效继承的工程决策
深入分析 %placeholder 与 @extend 的编译行为，在避免样式膨胀的同时最大化复用。
Sass 错误处理与调试：编写健壮的样式系统
利用 @error、@warn、@debug 以及断言函数构建可自检的样式库，提升团队协作效率。
利用 @at-root 重构嵌套结构：告别选择器地狱
用 @at-root 打破 Sass 嵌套限制，生成扁平且可控的 CSS 选择器，优化可维护性。
Sass 高级控制指令：超越基础循环的实用模式
本教程深入解析 @while、@for、@each 在复杂场景下的配合使用，例如动态生成网格系统、条件变量注入与性能优化。
Sass 自定义函数（@function）：实现数组操作与数据清洗
学习编写 Sass 函数来处理列表（数组）的过滤、映射与去重，弥补原生 Sass 缺少的数组方法，并封装成可复用库。
Sass 高级 Mixin 契约：参数校验与错误处理的工业实践
将 mixin 设计成带有类型检查、必填参数提示与自定义错误消息的API，提升团队协作时的代码健壮性。
Sass 模块化架构：用 @use 与 @forward 构建分层依赖系统
超越基础模块导入，讲解如何设计核心、组件、工具三层，并利用私有成员和更改前缀避免命名冲突与实际项目结构。
Sass 元编程与类型自省：动态生成样式的黑魔法
利用 meta 模块和类型检查函数在运行时探测变量类型、长度和属性，实现自适应的样式生成器。
Sass 与 CSS 自定义属性深度集成：动态主题切换的工程方案
将Sass变量编译为CSS自定义属性，并利用mixin实现运行时主题切换、局部覆盖与浏览器回退。
Sass 选择器性能陷阱与编译优化策略
分析Sass嵌套生成的选择器深度对CSS性能的影响，并给出重构技巧与编译时优化方法。
Sass 色彩函数深潜：构建自动调色板与无障碍对比度工具
利用color.adjust、color.scale和color.contrast创建可访问的动态配色方案，并封装成mixin。
Sass 数据结构高阶：Map 的嵌套、合并与深度查询
掌握Sass映射的复杂用法：多级嵌套、递归获取、深度合并与迭代展开，用于管理复杂的配置系统。
Sass 构建工具集成：创建自定义导入解析器与按需编译工作流
深入sass命令行与Node API，编写自定义导入器实现路径别名、条件编译和缓存优化。
使用 @at-root 打破嵌套限制实现网格覆盖
深入讲解 @at-root 指令如何突破嵌套作用域，用于创建全局覆盖样式或脱离父级限制的网格系统。
占位选择器与 @extend 的静默继承性能策略
对比普通类继承与占位选择器（%）在编译体积和渲染性能上的差异，讲解何时使用占位符避免冗余 CSS。
利用 @content 与变量传递实现条件式插槽逻辑
展示 @content 如何像插槽一样接收外部代码块，结合变量控制是否渲染内容，构建类似模板引擎的混合宏。
循环生成 data-* 属性与 CSS 自定义属性联动主题
结合 @each 循环和 CSS 自定义属性，动态创建基于 data-* 属性的主题色板，实现运行时变量切换。
使用 selector 函数族精准操纵选择器结构
讲解 selector-nest, selector-append, selector-replace 等函数如何动态修改选择器字符串，用于封装库或构建复杂选择器组合。
深入变量作用域：!global、!default 与块级阴影控制
详细解析 Sass 变量作用域规则，演示 !global 强制覆盖、!default 设置降级以及嵌套块中的变量隔离技巧。
利用 Sass 数学函数与 random() 生成动态调色板
结合 Sass 的数学运算（floor, abs, min/max）和 random() 函数，生成视觉和谐但随机变化的颜色系列。
深度合并映射实现可扩展配置覆盖系统
学习 map-merge 与 map-deep-merge 自定义函数，实现多层次配置合并，用于组件库的主题覆盖。
结合 @each 与索引计数实现样式轮询
利用 @each 循环中自动收集索引，配合 @if 控制流实现奇偶行、分组边界等复杂样式模式。
插值安全与动态 URL 编码生成资源路径
展示插值 (#{}) 在字符串、选择器、属性值中的转义规则，并解决动态 URL 中的引号与编码问题。
基于OOCSS的模块化Mixin工厂设计
学习如何构建可复用的Mixin工厂，自动生成符合OOCSS原则的模块化样式，避免代码重复与命名冲突。
利用@at-root构建响应式组件上下文
深入@at-root指令，在嵌套选择器中精准控制输出层级，实现不受父级影响的独立响应式组件。
Sass与CSS自定义属性动态主题引擎
结合Sass的数学函数与CSS变量，构建运行时动态切换主题的智能引擎，实现无重绘主题切换。
元编程：用@mixin-content与meta函数构建调试层
使用Sass的meta模块与@content指令，编写可自检的元Mixin，在开发环境下自动注入调试标记。
幽灵类与占位符：构建零冗余的抽象层
掌握%占位符与@extend的高级用法，设计零输出的抽象层，实现真正的DRY继承。
条件编译艺术：@if/@else构建智能样式开关
利用Sass的条件逻辑与布尔变量，创建可根据环境或参数自动开关的智能样式片段。
数据驱动样式：用Sass Maps构建配置化UI库
将样式抽象为多层嵌套的Map数据结构，通过函数与迭代自动生成完整组件库。
借助Sass模块系统实现真正的CSS作用域隔离
使用@use、@forward与私有成员实现组件级作用域，避免全局污染与命名冲突。
利用Sass数学函数生成流体排版的clamp()公式
结合Sass的数学运算与CSS clamp()，生成精确的流体字号与间距系统。
优雅失败：构建Sass编译时的错误与警告系统
使用@error、@warn与@debug指令构建友好的编译时诊断系统，防止错误样式上线。
用 Sass 数学函数构建设计系统动态比例尺
探索 Sass 内置数学函数（如 pow、sqrt、log）的深度用法，创建自适应的比例尺，避免手动计算每个断点。
元编程：用 Sass meta 模块实现自省与动态生成
深入 Sass meta 模块的 feature-exists、function-exists、variable-exists 等函数，编写根据上下文自动切换输出的智能代码。
模块化作用域与选择性导入：超越 @use 基础
讲解 @use 的 with、as、以及如何通过作用域隔离实现零冲突的组件式 Sass 架构。
动态网格生成器：用 @for 和 @each 构建任意 CSS Grid 系统
利用控制指令与字符串插值，自动生成响应式 grid-template-areas 和 grid-column/grid-row。
在 Sass 中操作 CSS 自定义属性：动态主题与运行时变量
巧妙结合 Sass 变量与 CSS 自定义属性，实现编译时计算与运行时动态切换的混合方案。
防御性编程：Sass 中的错误处理与参数验证
使用 @error、@warn、@debug 以及类型检查函数，编写健壮的混合宏和函数。
用 Sass 混合宏与选择器函数实现 BEM 智能生成器
利用 `&` 父选择器和 `selector.append` 函数，自动生成 BEM 块、元素、修饰符。
递归与高阶函数：用 Sass 列表和映射实现树形数据处理
在 Sass 中模拟函数式编程，用递归遍历多层嵌套的 map 并生成复杂样式。
选择器炼金术：使用 selector 模块进行选择器运算与合并
探索 selector.nest、selector.replace、selector.unify 等函数，实现选择器的动态拼接与优化。
基于色轮生成无障碍调色板：Color 模块的感知亮度计算
使用 color 模块的 luminance、contrast-ratio 等函数自动生成符合 WCAG 的调色板。