text-shadow描边需用参数化mixin封装，因其颜色、粗细等需随主题/状态动态变化，且单层shadow无法模拟真实描边，须叠加8方向阴影；mixin支持单位控制、模糊降级、层级隔离等实战需求。
text-shadow描边在Sass里为什么不能直接写死？
因为真实项目中，描边颜色、粗细、偏移量、模糊度经常随主题或组件状态变化——比如深色模式下描边要更粗一点，按钮悬停时描边要变色。text-shadow本身不支持缩放或响应式单位自动适配，硬编码2px在高DPI屏上会显得过细，而写0.125rem又难对齐像素网格。参数化Mixin就是为把这种“可变但有规律”的样式逻辑收口。
用@mixin text-stroke($color, $thickness: 1px)封装基础描边
别用-webkit-text-stroke：它不支持模糊，且在Firefox里完全失效；text-shadow是唯一跨浏览器方案。但单层shadow只能模拟“线性”描边，要逼近真实描边效果，得叠加8个方向的阴影（上/下/左/右 + 四角）。Mixin里用循环生成这些值，避免手写8行重复代码：
@mixin text-stroke($color, $thickness: 1px) {
$offsets: (
(0, -$thickness), ($thickness, 0), (0, $thickness), (-$thickness, 0),
($thickness, -$thickness), ($thickness, $thickness), (-$thickness, $thickness), (-$thickness, -$thickness)
);
$shadows: ();
@each $x, $y in $offsets {
$shadows: append($shadows, #{$x} #{$y} 0 $color, comma);
}
text-shadow: $shadows;
}
调用时：@include text-stroke(#ff6b6b, 2px)。注意$thickness必须是绝对单位（px或rem），不能用em——否则嵌套元素里会因font-size不同导致描边错位。
如何兼容文字加粗和小字号场景？
描边在font-weight: bold下容易糊成一团，在font-size: 12px下会吞掉字形细节。这时候不能只调粗度，得动态降模糊值：
- 小字号（≤14px）时，强制
text-shadow模糊半径为0，靠多层偏移补偿视觉厚度 - 加粗文本建议搭配
paint-order: fill stroke（仅Chrome/Edge支持），但得先用@supports检测 - 若需极致兼容，给
$thickness传0.5px——现代浏览器能渲染亚像素，比关模糊更自然
为什么mixins里不用@function计算shadow列表？
因为Sass的@function返回值不能直接塞进text-shadow声明（语法报错），而@mixin能展开为纯CSS规则。另外，如果描边要响应视口变化（比如移动端减半），得结合clamp()函数，但clamp()必须写在CSS属性值里，不能提前在Sass里计算——所以最终生成的CSS应保留clamp(0.5px, 2vmin, 2px)这类原生函数，Mixin只负责拼接结构，不侵入数值逻辑。
最易被忽略的是描边层级：它永远在文字fill之上，但若父容器有filter: drop-shadow()，会把描边也套一层阴影。这种情况得用isolation: isolate隔离堆叠上下文，而不是试图在Mixin里hack。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
