scss函数无法生成三角形样式，只有@mixin能实现——因函数仅返回值，不能输出css声明块，也无法处理方向映射、配套属性、条件分支及浏览器兼容等完整逻辑。
不能用 SCSS 函数（@function）生成三角形样式代码——SCSS 函数只能返回值（如数字、颜色、字符串），无法输出 CSS 声明块。真正能“生成三角形”的只有 @mixin，这是唯一可复用、可插值、可条件分支的声明容器。
为什么不能用 @function 写三角形生成器
常见误解是想写类似 @function triangle($dir, $size) { @return "border-top: #{$size} solid red;" } 这种逻辑。但 SCSS 不允许函数返回带分号或冒号的字符串并自动解析为样式；即使拼出字符串，你也得手动 #{} 插入，且无法参与 @if 分支、无法设 width: 0 等配套规则——结果就是样式不完整、方向错乱、编译后无效。
-
@function返回的是纯数据，不是 CSS 规则 - 无法在函数体内写
border-left: ...这类声明 - 无法控制
width/height/overflow等必需配套属性 - 即便强行拼字符串，调用处还得额外包裹
{}和手动插入，失去封装意义
@mixin triangle-down 必须显式写全四条 border-*
直接用 border: $size solid transparent 再覆盖某一边，会重置所有边的 border-style 和 border-color，导致透明边被污染（比如继承父级文字色）、斜接关系断裂，三角形塌陷或变方块。
- 向下箭头必须写：
border-left: $size solid transparent、border-right: $size solid transparent、border-top: $size solid $color（注意：是top，不是bottom） - 方向逻辑是“哪边留色”，不是“箭头朝哪”：top →
border-bottom，bottom →border-top，left →border-right，right →border-left -
border-#{$dir}插值只对left/right安全；top/bottom必须用@if分支，否则编译报错 - 旧版 Safari 对
solid transparent渲染不稳，可降级为dashed transparent（现代项目通常不用）
如何让底边和高真正独立可控
纯 border 三角默认是等腰直角，底边 = 2 × border-width，高 = border-width。若需精确尺寸（如底边 12px、高 8px），必须反推各边宽度：
- 等腰向下三角：
border-left和border-right各取$base / 2，border-top取$height - 非等腰（如 30° 锐角）：先转弧度
$rad: $deg * math.pi() / 180，再算比例math.tan($rad)，结果必须math.round()包裹，否则小数像素引发 subpixel 模糊 - IE 不支持
math.*，Sass @use "sass:math" 或回退到查表法 - 别忘了加
vertical-align: middle到调用处，否则行内三角上下位置飘移
真正难的不是写对一个方向，而是统一处理方向映射、尺寸反推、浏览器兼容性 fallback 和调用时的定位对齐——这些都得塞进 mixin 里，没法靠函数偷懒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
