CSS工具减少重复代码：混合宏与函数应用

CSS工具如Sass、Less和PostCSS通过混合宏（mixin）和函数（function）两大核心机制显著减少样式重复：mixin用于封装并复用整套CSS声明块（如居中布局、按钮基础样式），支持参数化以提升灵活性；function则专注动态计算与值处理（如px转rem、主题色明暗判断），返回可嵌入属性的数值，不输出规则。二者分工明确——“输出样式”选mixin，“产出数值”选function；而原生CSS虽可通过自定义属性和calc()模拟部分能力，但在逻辑表达、类型安全和作用域控制上远不如预处理器强大，合理封装高复用、低变更的模块（如间距标尺、断点配置）才是提升团队协作效率与代码可维护性的关键。

混合宏（mixin）怎么避免写重复的 CSS 规则

直接复用样式块，而不是一遍遍敲 display: flex、align-items: center 这类组合。Sass 的 @mixin 最适合封装这类“固定搭配”。比如响应式居中、按钮基础态、表单控件重置，都值得抽成 mixin。

• 定义时用 @mixin flex-center { display: flex; align-items: center; justify-content: center; }，调用时只写 @include flex-center;
• 带参数的 mixin 更灵活：@mixin pad($size) { padding: $size; }，然后 @include pad(1rem); 或 @include pad(0.5rem 1rem);
• 别在 mixin 里硬编码颜色或尺寸——用参数传，否则复用性断崖下跌
• 注意：CSS 原生不支持 mixin，必须用 Sass/Less/PostCSS 插件编译，纯 CSS 文件里写 @mixin 会直接报错

函数（function）适合处理什么类型的样式复用

当需要动态计算、条件判断或转换值时，函数比 mixin 更合适。比如根据主题色生成明暗变体、把 px 转 rem、按比例缩放字体大小——这些逻辑不适合塞进声明块，得靠函数返回结果。

• Sass 示例：@function px2rem($px) { @return $px / 16px * 1rem; }，然后在属性里用：font-size: px2rem(18px);
• 函数不能输出 CSS 规则，只返回值；想输出规则必须用 mixin
• 常见陷阱：函数里不能调用 @include 或修改全局变量（Sass 中函数是纯的），否则编译失败
• Less 的 .unit()、PostCSS 的 postcss-csso 插件也提供类似能力，但语法和限制不同，别混用

什么时候该用 mixin，什么时候该用 function

关键看你要“输出样式”还是“产出数值”。输出一整套声明？用 mixin。要算一个值再塞进某个属性？用 function。

• @mixin btn-variant($bg, $color) { background-color: $bg; color: $color; border: 1px solid darken($bg, 10%); } → 输出规则，含计算，但主体是声明
• @function theme-contrast($color) { @return if(lightness($color) > 50%, #333, #fff); } → 只返回颜色值，供其他地方使用，比如 color: theme-contrast($primary);
• 别为了省一行代码把简单计算写成函数——margin: 0.5rem 就别包 half-rem()，反而增加阅读负担
• 多人协作时，函数命名要带前缀（如 mylib-px2rem），避免和第三方库冲突

原生 CSS 里怎么靠近这种复用效果

CSS 自身没 mixin 和 function，但能靠 custom property + calc() 模拟部分能力，只是灵活性和类型安全差很多。

• 用 --gap: 1rem; 定义，再用 gap: var(--gap); 复用——这是最接近“变量”的方式
• calc(var(--base-font) * 1.2) 可做简单缩放，但不支持条件、循环、颜色转换等
• 注意：CSS 变量作用域是运行时继承的，不是编译时替换，所以无法实现 Sass 那种“局部作用域函数参数”
• 如果项目已上 PostCSS，推荐加 postcss-mixins 和 postcss-functions，语法更接近 Sass，且输出仍是标准 CSS

真正难的不是写出第一个 mixin 或 function，而是判断哪些逻辑值得封装、哪些封装后反而让同事看不懂。颜色系统、间距标尺、断点配置这类高复用、低变更的模块优先抽；而临时加的“这个按钮要右对齐”就别急着建 @mixin right-align-btn。

到这里，我们也就讲完了《CSS工具减少重复代码：混合宏与函数应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！