混合宏（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。
