混合宏（mixin）用于复用CSS声明块，如@mixin flex-center封装居中样式；函数（function）用于动态计算并返回值，如px2rem()转换单位；关键区别在于mixin输出规则，function产出数值。
混合宏（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。
