mindmap
    id1[Sass/SCSS 基础概念]
        id1-1[什么是 CSS 预处理器]
            id1-1-1[预处理器定义与作用]
            id1-1-2[预处理器与原生 CSS 的区别]
            id1-1-3[主流 CSS 预处理器对比]
        id1-2[Sass 与 SCSS 的关系]
            id1-2-1[语法格式差异]
            id1-2-2[历史发展演变]
            id1-2-3[选择建议与最佳实践]
        id1-3[环境配置与安装]
            id1-3-1[Node.js 环境安装]
            id1-3-2[Sass 编译器安装]
            id1-3-3[构建工具集成]

mindmap
    id2[Sass/SCSS 核心语法]
        id2-1[变量系统]
            id2-1-1[变量声明与使用]
            id2-1-2[变量作用域]
            id2-1-3[数据类型与运算]
        id2-2[嵌套规则]
            id2-2-1[选择器嵌套]
            id2-2-2[属性嵌套]
            id2-2-3[父选择器引用]
        id2-3[混合宏 Mixins]
            id2-3-1[定义与调用混合宏]
            id2-3-2[参数传递]
            id2-3-3[默认参数设置]
        id2-4[继承与占位符]
            id2-4-1[@extend 指令使用]
            id2-4-2[占位符选择器]
            id2-4-3[继承链管理]
        id2-5[控制指令]
            id2-5-1[@if 条件判断]
            id2-5-2[@for 循环]
            id2-5-3[@each 遍历]
            id2-5-4[@while 循环]

mindmap
    id3[Sass/SCSS 高级特性]
        id3-1[函数系统]
            id3-1-1[内置函数分类]
            id3-1-2[自定义函数定义]
            id3-1-3[函数参数处理]
        id3-2[模块化与导入]
            id3-2-1[@import 与 @use 区别]
            id3-2-2[模块命名空间]
            id3-2-3[私有成员管理]
        id3-3[运算与单位处理]
            id3-3-1[算术运算规则]
            id3-3-2[单位转换]
            id3-3-3[颜色运算]
        id3-4[插值语句]
            id3-4-1[插值语法使用]
            id3-4-2[动态选择器生成]
            id3-4-3[动态属性名生成]

mindmap
    id4[Sass/SCSS 工程化实践]
        id4-1[项目结构规划]
            id4-1-1[-1 模式架构]
            id4-1-2[文件组织规范]
            id4-1-3[命名约定]
        id4-2[编译与构建]
            id4-2-1[编译选项配置]
            id4-2-2[输出格式选择]
            id4-2-3[源码映射生成]
        id4-3[性能优化]
            id4-3-1[编译速度优化]
            id4-3-2[输出文件优化]
            id4-3-3[缓存策略]

mindmap
    id5[Sass/SCSS 最佳实践]
        id5-1[代码规范]
            id5-1-1[代码风格指南]
            id5-1-2[注释规范]
            id5-1-3[错误处理]
        id5-2[组件化开发]
            id5-2-1[组件设计原则]
            id5-2-2[样式复用策略]
            id5-2-3[主题切换实现]
        id5-3[响应式设计]
            id5-3-1[媒体查询封装]
            id5-3-2[断点管理系统]
            id5-3-3[移动优先策略]

mindmap
    id6[Sass/SCSS 生态系统]
        id6-1[常用库与框架]
            id6-1-1[Compass 框架]
            id6-1-2[Bourbon 工具集]
            id6-1-3[Susy 栅格系统]
        id6-2[开发工具集成]
            id6-2-1[编辑器插件]
            id6-2-2[调试工具]
            id6-2-3[自动化工具]
        id6-3[团队协作]
            id6-3-1[版本控制策略]
            id6-3-2[代码审查流程]
            id6-3-3[文档编写规范]

mindmap
    id7[Sass/SCSS 进阶应用]
        id7-1[动态样式生成]
            id7-1-1[条件样式生成]
            id7-1-2[循环样式生成]
            id7-1-3[配置驱动样式]
        id7-2[主题系统设计]
            id7-2-1[多主题架构]
            id7-2-2[动态主题切换]
            id7-2-3[主题扩展机制]
        id7-3[与其他技术集成]
            id7-3-1[与现代框架结合]
            id7-3-2[与构建工具集成]
            id7-3-3[与设计系统对接]