2026/9/3 6:59:19
FEATURED · 精选文章 
1. 引言在现代前端工程化体系中CSS 预处理器CSS Preprocessor已成为不可或缺的一环。它并非要取代 CSS而是在 CSS 语法之上提供了一层抽象使开发者能够以更高效、更可维护的方式编写样式代码最终编译为浏览器可识别的标准 CSS。2. 什么是 CSS 预处理器CSS 预处理器是一种专门的编程语言它扩展了 CSS 的语法增加了变量、嵌套、混合Mixin、继承、函数、逻辑控制等特性之后通过编译器将扩展语法转换为标准的 CSS 文件。简单来说预处理器 CSS 编程能力它让样式表拥有了“程序”的特性。2.1 工作流程[源码 .scss/.less/.styl] → [预处理器编译器] → [标准 .css] → [浏览器渲染]编译过程可以在开发阶段实时进行如通过构建工具 watch也可以作为构建步骤的一部分如 Webpack、Gulp 等。3. 为什么需要 CSS 预处理器原生 CSS 存在以下痛点缺乏变量颜色、字体、间距等重复值无法统一定义修改时需要全局搜索替换。嵌套缺失选择器层级关系只能通过重复书写父级来表达冗余且难以维护。无法复用代码块相同的样式片段如清除浮动、圆角需要在多个地方复制粘贴。缺少逻辑能力不能根据条件生成不同样式无法循环生成规则。难以模块化CSS 的import会产生额外 HTTP 请求且作用域全局容易冲突。预处理器的核心价值可维护性变量与模块化让全局样式统一调整变得容易。可复用性Mixin、继承、函数避免了重复代码。结构化嵌套规则直观反映 DOM 层级增强可读性。逻辑能力条件判断与循环可以动态生成大量 CSS 规则。工程化配合构建工具实现自动前缀、压缩、代码分割等。4. 主流 CSS 预处理器对比目前最流行的三种预处理器是Sass/SCSS、Less和Stylus。特性Sass (SCSS)LessStylus语法风格SCSS接近 CSS、Sass缩进式类似 CSS极简可省略括号、冒号、分号变量$var: value;var: value;var value嵌套支持支持支持Mixinmixin/include类名混入.函数式混入继承extend:extend()extend条件语句ifelse ifelsewhen守卫if/else循环foreachwhile递归混入模拟for/each函数支持function支持较简单支持生态系统最成熟Compass、Bourbon 等Bootstrap 3/4 曾使用较小但灵活编译器Dart Sass / LibSass / Node-sassLess.jsStylus学习曲线中等较低较高语法太灵活选择建议团队协作、大型项目SassSCSS生态最完善文档丰富。简单项目、快速上手Less接近 CSS无需额外工具链浏览器端可编译但不推荐生产使用。追求极致灵活、个人项目Stylus语法极其简洁但团队一致性较难保证。5. 核心特性深度解析以 SCSS 为例以下深入剖析预处理器最重要的特性并展示编译前后的对比。5.1 变量Variables变量用于存储复用的值颜色、字体栈、尺寸、断点等。// 定义 $primary-color:#3498db;$font-stack:Helvetica Neue,sans-serif;$base-padding:16px;// 使用 .button{background-color:$primary-color;font-family:$font-stack;padding:$base-padding;}高级用法变量可以参与计算支持作用域与!default默认值便于覆盖。$base-size:8px;$spacing-unit:$base-size * 2;// 16px // !default如果变量未被定义则使用该值否则忽略 $brand-color:red !default;5.2 嵌套Nesting嵌套允许在选择器内书写子选择器反映 HTML 层级同时支持引用父选择器。.nav{background:#333;-item{// 编译为 .nav-itempadding:10px;:hover{// .nav-item:hoverbackground:#555;}.active{// .nav-item.activecolor:#fff;}}.icon{// 后代选择器 .nav .iconmargin-right:5px;}}编译结果.nav{background:#333;}.nav-item{padding:10px;}.nav-item:hover{background:#555;}.nav-item.active{color:#fff;}.nav .icon{margin-right:5px;}注意事项过度嵌套会导致选择器过长、性能下降CSS 从右向左匹配一般建议嵌套不超过 3 层。5.3 混合MixinMixin 是可复用的样式块可以接受参数类似函数。// 定义 mixinmixinborder-radius($radius){-webkit-border-radius:$radius;-moz-border-radius:$radius;border-radius:$radius;}// 使用 .box{includeborder-radius(10px);}参数默认值mixinbox-shadow($x:0,$y:0,$blur:5px,$color:rgba(0,0,0,.3)){box-shadow:$x $y $blur $color;}可变参数...mixintransition($properties...){transition:$properties;}// 调用includetransition(color .3s,background .3s);内容块content允许向 mixin 中插入自定义样式常用于响应式断点。mixinrespond-to($media){if$media phone{media(max-width:600px){content;}}elseif $media tablet{media(max-width:900px){content;}}}.sidebar{width:30%;includerespond-to(phone){width:100%;}}5.4 继承Extend / Inheritanceextend可以让一个选择器继承另一个选择器的所有样式编译后使用群组选择器比 Mixin 更高效减少重复代码。.error{border:1px solid #f00;color:#f00;}.error--serious{extend.error;font-weight:bold;}编译结果.error, .error--serious{border:1px solid #f00;color:#f00;}.error--serious{font-weight:bold;}占位符选择器Placeholder Selector%只有被extend时才输出样式避免产生无用基类。%btn-base{display:inline-block;padding:8px 16px;}.btn-primary{extend%btn-base;background:blue;}.btn-secondary{extend%btn-base;background:gray;}编译后不会出现.btn-base类只生成.btn-primary, .btn-secondary { ... }。5.5 函数Functions自定义函数用于计算并返回值可在任意属性值中使用。functionrem($px,$base:16px){return($px / $base)* 1rem;}.container{padding:rem(24px);// 1.5rem}Sass 内置大量函数颜色操作lighten、darken、rgba、数学函数、字符串函数、列表函数、Map 函数等。$primary:#3498db;.button{background:$primary;:hover{background:darken($primary,10%);}}5.6 流程控制Control Directives支持条件判断与循环极大增强了动态生成 CSS 的能力。if/else if/elsemixintheme($mode){if$mode dark{background:#222;color:#eee;}elseif $mode light{background:#fff;color:#333;}else{background:gray;color:black;}}for通过数字循环。for$i from 1 through 5{// through 包含 5to 不包含 .col-#{$i}{width:($i / 5)* 100%;}}each遍历列表或 Map。// 列表 $sizes:10px,20px,30px;each$size in $sizes{.icon-#{$size}{font-size:$size;}}// Map $breakpoints:(small:480px,medium:768px,large:1024px);each$name,$width in $breakpoints{.container-#{$name}{max-width:$width;}}while条件循环。$i:6;while$i 0{.item-#{$i}{width:2em * $i;}$i:$i - 2;}5.7 模块化与导入import在 Sass 中会被合并编译为单个 CSS 文件避免额外请求与原生 CSS import 不同但 Sass 会尽量编译合并。Partials部分文件以下划线开头的文件如_variables.scss不会被单独编译只用于导入。// _variables.scss $primary:#333;// main.scssimportvariables;importmixins;importcomponents/button;use推荐Dart Sass 新模块系统use引入了命名空间避免全局冲突并且只会加载一次模块。// _colors.scss $primary:blue;// main.scssusecolors;.button{background:colors.$primary;}也可以使用as重命名use colors as c;然后c.$primary。forward用于转发模块便于组织多个 partial 为一个入口文件。// _library.scssforwardcolors;forwardmixins;5.8 插值Interpolation使用#{}可以将变量或表达式结果嵌入到选择器或属性名中。$name:foo;$attr:border;.#{$name}{#{$attr}-color:blue;}5.9 注释//单行注释不会被编译到 CSS 中。/* */多行注释在压缩模式下可配置是否保留通常通过/*!强制保留。6. 实际项目中的应用场景6.1 设计令牌Design Tokens管理将颜色、间距、字号等定义为变量形成统一的设计系统。// tokens/_colors.scss $color-primary:#5B67F1;$color-secondary:#A3B1FF;$color-text:#1F2430;$color-bg:#F7F8FC;// tokens/_spacing.scss $space-xs:4px;$space-sm:8px;$space-md:16px;$space-lg:24px;$space-xl:32px;6.2 响应式断点管理结合 Mixin content构建语义化的媒体查询。mixinbreakpoint($point){if$point mobile{media(max-width:480px){content;}}elseif $point tablet{media(max-width:768px){content;}}elseif $point desktop{media(min-width:1024px){content;}}}.grid{display:grid;grid-template-columns:repeat(4,1fr);includebreakpoint(tablet){grid-template-columns:repeat(2,1fr);}includebreakpoint(mobile){grid-template-columns:1fr;}}6.3 主题切换利用变量与条件 Mixin 生成多套主题。mixintheme($name){if$name light{--bg:#fff;--text:#333;}elseif $name dark{--bg:#1a1a1a;--text:#eee;}}:root[data-themelight]{includetheme(light);}:root[data-themedark]{includetheme(dark);}6.4 栅格系统生成通过循环快速生成栅格类。for$i from 1 through 12{.col-#{$i}{width:percentage($i / 12);}}6.5 动画关键帧生成mixinkeyframes($name){-webkit-keyframes#{$name}{content;}-moz-keyframes#{$name}{content;}keyframes#{$name}{content;}}includekeyframes(fadeIn){from{opacity:0;}to{opacity:1;}}7. 与构建工具的集成7.1 Webpack使用sass-loader内部依赖sass或node-sass配合css-loader、style-loader或mini-css-extract-plugin。// webpack.config.jsmodule.exports{module:{rules:[{test:/\.scss$/,use:[style-loader,// 或 MiniCssExtractPlugin.loadercss-loader,postcss-loader,// 自动前缀等sass-loader// 编译 SCSS]}]}};7.2 ViteVite 对 Sass 有内置支持只需安装sass依赖。// vite.config.jsexportdefault{css:{preprocessorOptions:{scss:{additionalData:use /styles/variables as *;// 全局注入变量}}}}7.3 Gulpconstgulprequire(gulp);constsassrequire(gulp-sass)(require(sass));gulp.task(sass,function(){returngulp.src(./src/scss/**/*.scss).pipe(sass({outputStyle:compressed}).on(error,sass.logError)).pipe(gulp.dest(./dist/css));});7.4 PostCSS 与预处理器PostCSS 本身不是预处理器但常与预处理器配合使用。例如Sass 编译 → PostCSS 处理自动前缀、px 转 rem、压缩等。8. 常见问题与最佳实践8.1 避免过度嵌套问题嵌套过深导致选择器过于具体、难以覆盖且影响渲染性能。实践最多 3 层嵌套优先使用 BEM 等命名规范减少层级。8.2 变量作用域与命名使用清晰的命名约定$color-primary、$spacing-md等。利用!default便于主题覆盖但不要随意覆盖第三方库变量建议使用独立命名空间或use ... with。8.3 Mixin 与 Extend 的选择Mixin适合需要传参、动态生成不同样式的场景会复制代码。Extend适合静态样式复用且选择器关系密切编译后共享规则但需注意extend可能导致选择器顺序问题。推荐优先使用 Mixin更可预测在大型样式共享且不需要参数时使用%placeholderextend。8.4 性能考量编译后的 CSS 体积过多使用 Mixin 会产生重复代码使用extend可能产生巨大的选择器群组。注意权衡。选择器性能避免过深嵌套、避免大量通配符。生产环境压缩设置outputStyle: compressed。8.5 团队协作规范统一使用 SCSS 语法可读性更好。目录结构建议styles/下分abstracts/变量、mixin、函数、base/reset、typography、components/、layout/、pages/、themes/。使用 Stylelint 检查代码风格配合 Prettier 格式化。9. 未来趋势CSS 原生变量Custom Properties现代 CSS 已原生支持变量且具有运行时动态特性预处理器变量编译后是静态值两者可结合使用预处理变量用于编译期计算CSS 变量用于运行时主题切换。CSS Modules / CSS-in-JS部分场景下替代预处理器但预处理器在构建期生成静态 CSS 仍有优势。Dart Sass 成为主流Sass 官方已宣布 LibSass 弃用未来统一使用 Dart Sass支持use等新特性建议新项目采用。10. 总结CSS 预处理器通过引入变量、嵌套、Mixin、继承、函数、逻辑控制等机制显著提升了样式表的可维护性、可复用性与开发效率。SassSCSS凭借其成熟生态和强大功能成为大多数团队的首选。但也要注意合理使用避免过度设计将预处理器与 PostCSS、CSS 变量、模块化方案结合构建稳健的样式工程体系。
CSS 预处理器深度解析-Day35
1. 引言在现代前端工程化体系中CSS 预处理器CSS Preprocessor已成为不可或缺的一环。它并非要取代 CSS而是在 CSS 语法之上提供了一层抽象使开发者能够以更高效、更可维护的方式编写样式代码最终编译为浏览器可识别的标准 CSS。2. 什么是 CSS 预处理器CSS 预处理器是一种专门的编程语言它扩展了 CSS 的语法增加了变量、嵌套、混合Mixin、继承、函数、逻辑控制等特性之后通过编译器将扩展语法转换为标准的 CSS 文件。简单来说预处理器 CSS 编程能力它让样式表拥有了“程序”的特性。2.1 工作流程[源码 .scss/.less/.styl] → [预处理器编译器] → [标准 .css] → [浏览器渲染]编译过程可以在开发阶段实时进行如通过构建工具 watch也可以作为构建步骤的一部分如 Webpack、Gulp 等。3. 为什么需要 CSS 预处理器原生 CSS 存在以下痛点缺乏变量颜色、字体、间距等重复值无法统一定义修改时需要全局搜索替换。嵌套缺失选择器层级关系只能通过重复书写父级来表达冗余且难以维护。无法复用代码块相同的样式片段如清除浮动、圆角需要在多个地方复制粘贴。缺少逻辑能力不能根据条件生成不同样式无法循环生成规则。难以模块化CSS 的import会产生额外 HTTP 请求且作用域全局容易冲突。预处理器的核心价值可维护性变量与模块化让全局样式统一调整变得容易。可复用性Mixin、继承、函数避免了重复代码。结构化嵌套规则直观反映 DOM 层级增强可读性。逻辑能力条件判断与循环可以动态生成大量 CSS 规则。工程化配合构建工具实现自动前缀、压缩、代码分割等。4. 主流 CSS 预处理器对比目前最流行的三种预处理器是Sass/SCSS、Less和Stylus。特性Sass (SCSS)LessStylus语法风格SCSS接近 CSS、Sass缩进式类似 CSS极简可省略括号、冒号、分号变量$var: value;var: value;var value嵌套支持支持支持Mixinmixin/include类名混入.函数式混入继承extend:extend()extend条件语句ifelse ifelsewhen守卫if/else循环foreachwhile递归混入模拟for/each函数支持function支持较简单支持生态系统最成熟Compass、Bourbon 等Bootstrap 3/4 曾使用较小但灵活编译器Dart Sass / LibSass / Node-sassLess.jsStylus学习曲线中等较低较高语法太灵活选择建议团队协作、大型项目SassSCSS生态最完善文档丰富。简单项目、快速上手Less接近 CSS无需额外工具链浏览器端可编译但不推荐生产使用。追求极致灵活、个人项目Stylus语法极其简洁但团队一致性较难保证。5. 核心特性深度解析以 SCSS 为例以下深入剖析预处理器最重要的特性并展示编译前后的对比。5.1 变量Variables变量用于存储复用的值颜色、字体栈、尺寸、断点等。// 定义 $primary-color:#3498db;$font-stack:Helvetica Neue,sans-serif;$base-padding:16px;// 使用 .button{background-color:$primary-color;font-family:$font-stack;padding:$base-padding;}高级用法变量可以参与计算支持作用域与!default默认值便于覆盖。$base-size:8px;$spacing-unit:$base-size * 2;// 16px // !default如果变量未被定义则使用该值否则忽略 $brand-color:red !default;5.2 嵌套Nesting嵌套允许在选择器内书写子选择器反映 HTML 层级同时支持引用父选择器。.nav{background:#333;-item{// 编译为 .nav-itempadding:10px;:hover{// .nav-item:hoverbackground:#555;}.active{// .nav-item.activecolor:#fff;}}.icon{// 后代选择器 .nav .iconmargin-right:5px;}}编译结果.nav{background:#333;}.nav-item{padding:10px;}.nav-item:hover{background:#555;}.nav-item.active{color:#fff;}.nav .icon{margin-right:5px;}注意事项过度嵌套会导致选择器过长、性能下降CSS 从右向左匹配一般建议嵌套不超过 3 层。5.3 混合MixinMixin 是可复用的样式块可以接受参数类似函数。// 定义 mixinmixinborder-radius($radius){-webkit-border-radius:$radius;-moz-border-radius:$radius;border-radius:$radius;}// 使用 .box{includeborder-radius(10px);}参数默认值mixinbox-shadow($x:0,$y:0,$blur:5px,$color:rgba(0,0,0,.3)){box-shadow:$x $y $blur $color;}可变参数...mixintransition($properties...){transition:$properties;}// 调用includetransition(color .3s,background .3s);内容块content允许向 mixin 中插入自定义样式常用于响应式断点。mixinrespond-to($media){if$media phone{media(max-width:600px){content;}}elseif $media tablet{media(max-width:900px){content;}}}.sidebar{width:30%;includerespond-to(phone){width:100%;}}5.4 继承Extend / Inheritanceextend可以让一个选择器继承另一个选择器的所有样式编译后使用群组选择器比 Mixin 更高效减少重复代码。.error{border:1px solid #f00;color:#f00;}.error--serious{extend.error;font-weight:bold;}编译结果.error, .error--serious{border:1px solid #f00;color:#f00;}.error--serious{font-weight:bold;}占位符选择器Placeholder Selector%只有被extend时才输出样式避免产生无用基类。%btn-base{display:inline-block;padding:8px 16px;}.btn-primary{extend%btn-base;background:blue;}.btn-secondary{extend%btn-base;background:gray;}编译后不会出现.btn-base类只生成.btn-primary, .btn-secondary { ... }。5.5 函数Functions自定义函数用于计算并返回值可在任意属性值中使用。functionrem($px,$base:16px){return($px / $base)* 1rem;}.container{padding:rem(24px);// 1.5rem}Sass 内置大量函数颜色操作lighten、darken、rgba、数学函数、字符串函数、列表函数、Map 函数等。$primary:#3498db;.button{background:$primary;:hover{background:darken($primary,10%);}}5.6 流程控制Control Directives支持条件判断与循环极大增强了动态生成 CSS 的能力。if/else if/elsemixintheme($mode){if$mode dark{background:#222;color:#eee;}elseif $mode light{background:#fff;color:#333;}else{background:gray;color:black;}}for通过数字循环。for$i from 1 through 5{// through 包含 5to 不包含 .col-#{$i}{width:($i / 5)* 100%;}}each遍历列表或 Map。// 列表 $sizes:10px,20px,30px;each$size in $sizes{.icon-#{$size}{font-size:$size;}}// Map $breakpoints:(small:480px,medium:768px,large:1024px);each$name,$width in $breakpoints{.container-#{$name}{max-width:$width;}}while条件循环。$i:6;while$i 0{.item-#{$i}{width:2em * $i;}$i:$i - 2;}5.7 模块化与导入import在 Sass 中会被合并编译为单个 CSS 文件避免额外请求与原生 CSS import 不同但 Sass 会尽量编译合并。Partials部分文件以下划线开头的文件如_variables.scss不会被单独编译只用于导入。// _variables.scss $primary:#333;// main.scssimportvariables;importmixins;importcomponents/button;use推荐Dart Sass 新模块系统use引入了命名空间避免全局冲突并且只会加载一次模块。// _colors.scss $primary:blue;// main.scssusecolors;.button{background:colors.$primary;}也可以使用as重命名use colors as c;然后c.$primary。forward用于转发模块便于组织多个 partial 为一个入口文件。// _library.scssforwardcolors;forwardmixins;5.8 插值Interpolation使用#{}可以将变量或表达式结果嵌入到选择器或属性名中。$name:foo;$attr:border;.#{$name}{#{$attr}-color:blue;}5.9 注释//单行注释不会被编译到 CSS 中。/* */多行注释在压缩模式下可配置是否保留通常通过/*!强制保留。6. 实际项目中的应用场景6.1 设计令牌Design Tokens管理将颜色、间距、字号等定义为变量形成统一的设计系统。// tokens/_colors.scss $color-primary:#5B67F1;$color-secondary:#A3B1FF;$color-text:#1F2430;$color-bg:#F7F8FC;// tokens/_spacing.scss $space-xs:4px;$space-sm:8px;$space-md:16px;$space-lg:24px;$space-xl:32px;6.2 响应式断点管理结合 Mixin content构建语义化的媒体查询。mixinbreakpoint($point){if$point mobile{media(max-width:480px){content;}}elseif $point tablet{media(max-width:768px){content;}}elseif $point desktop{media(min-width:1024px){content;}}}.grid{display:grid;grid-template-columns:repeat(4,1fr);includebreakpoint(tablet){grid-template-columns:repeat(2,1fr);}includebreakpoint(mobile){grid-template-columns:1fr;}}6.3 主题切换利用变量与条件 Mixin 生成多套主题。mixintheme($name){if$name light{--bg:#fff;--text:#333;}elseif $name dark{--bg:#1a1a1a;--text:#eee;}}:root[data-themelight]{includetheme(light);}:root[data-themedark]{includetheme(dark);}6.4 栅格系统生成通过循环快速生成栅格类。for$i from 1 through 12{.col-#{$i}{width:percentage($i / 12);}}6.5 动画关键帧生成mixinkeyframes($name){-webkit-keyframes#{$name}{content;}-moz-keyframes#{$name}{content;}keyframes#{$name}{content;}}includekeyframes(fadeIn){from{opacity:0;}to{opacity:1;}}7. 与构建工具的集成7.1 Webpack使用sass-loader内部依赖sass或node-sass配合css-loader、style-loader或mini-css-extract-plugin。// webpack.config.jsmodule.exports{module:{rules:[{test:/\.scss$/,use:[style-loader,// 或 MiniCssExtractPlugin.loadercss-loader,postcss-loader,// 自动前缀等sass-loader// 编译 SCSS]}]}};7.2 ViteVite 对 Sass 有内置支持只需安装sass依赖。// vite.config.jsexportdefault{css:{preprocessorOptions:{scss:{additionalData:use /styles/variables as *;// 全局注入变量}}}}7.3 Gulpconstgulprequire(gulp);constsassrequire(gulp-sass)(require(sass));gulp.task(sass,function(){returngulp.src(./src/scss/**/*.scss).pipe(sass({outputStyle:compressed}).on(error,sass.logError)).pipe(gulp.dest(./dist/css));});7.4 PostCSS 与预处理器PostCSS 本身不是预处理器但常与预处理器配合使用。例如Sass 编译 → PostCSS 处理自动前缀、px 转 rem、压缩等。8. 常见问题与最佳实践8.1 避免过度嵌套问题嵌套过深导致选择器过于具体、难以覆盖且影响渲染性能。实践最多 3 层嵌套优先使用 BEM 等命名规范减少层级。8.2 变量作用域与命名使用清晰的命名约定$color-primary、$spacing-md等。利用!default便于主题覆盖但不要随意覆盖第三方库变量建议使用独立命名空间或use ... with。8.3 Mixin 与 Extend 的选择Mixin适合需要传参、动态生成不同样式的场景会复制代码。Extend适合静态样式复用且选择器关系密切编译后共享规则但需注意extend可能导致选择器顺序问题。推荐优先使用 Mixin更可预测在大型样式共享且不需要参数时使用%placeholderextend。8.4 性能考量编译后的 CSS 体积过多使用 Mixin 会产生重复代码使用extend可能产生巨大的选择器群组。注意权衡。选择器性能避免过深嵌套、避免大量通配符。生产环境压缩设置outputStyle: compressed。8.5 团队协作规范统一使用 SCSS 语法可读性更好。目录结构建议styles/下分abstracts/变量、mixin、函数、base/reset、typography、components/、layout/、pages/、themes/。使用 Stylelint 检查代码风格配合 Prettier 格式化。9. 未来趋势CSS 原生变量Custom Properties现代 CSS 已原生支持变量且具有运行时动态特性预处理器变量编译后是静态值两者可结合使用预处理变量用于编译期计算CSS 变量用于运行时主题切换。CSS Modules / CSS-in-JS部分场景下替代预处理器但预处理器在构建期生成静态 CSS 仍有优势。Dart Sass 成为主流Sass 官方已宣布 LibSass 弃用未来统一使用 Dart Sass支持use等新特性建议新项目采用。10. 总结CSS 预处理器通过引入变量、嵌套、Mixin、继承、函数、逻辑控制等机制显著提升了样式表的可维护性、可复用性与开发效率。SassSCSS凭借其成熟生态和强大功能成为大多数团队的首选。但也要注意合理使用避免过度设计将预处理器与 PostCSS、CSS 变量、模块化方案结合构建稳健的样式工程体系。 
