用@mixin生成不同方向三角形需设width/height为0、三边transparent、一边solid有色，方向参数取top/bottom/left/right，通过border-width和border-xxx-color分别控制尺寸与颜色，避免简写覆盖。
怎么用 @mixin 生成不同方向的三角形
直接靠 border 实现三角形是 CSS 基础技巧，但每次手动写四条边、调透明度、算尺寸太容易出错。Sass 的 @mixin 能把逻辑收拢——核心是只暴露方向、大小、颜色三个参数，其余用变量推导。
关键点在于：上/下/左/右三角形本质是「三边透明 + 一边有色」，且非透明边必须设为 solid；border-width 必须用等比值（比如 10px），否则形状会歪。
实操建议：
- 方向参数用字符串枚举：
top/bottom/left/right，避免拼写错误 - 大小统一用单值（如
$size: 8px），内部自动转成border-width组合 - 颜色默认设为
currentColor，方便继承文字色，避免硬编码 - 必须重置
width和height为0，否则容器可能撑开
@mixin triangle($direction, $size, $color: currentColor) {
width: 0;
height: 0;
border: solid transparent;
@if $direction == top {
border-bottom-color: $color;
border-width: 0 $size $size $size;
} @else if $direction == bottom {
border-top-color: $color;
border-width: $size $size 0 $size;
} @else if $direction == left {
border-right-color: $color;
border-width: $size $size $size 0;
} @else if $direction == right {
border-left-color: $color;
border-width: $size 0 $size $size;
}
}
为什么不能直接用 border-color 简写覆盖
常见错误是写成 border-color: transparent transparent $color transparent 再加 border-style: solid，但这样会覆盖掉 border-width 的独立设置，导致三角形比例失控。
Sass 编译后生成的是标准 CSS，而 border 简写会强制重置所有子属性（包括 width 和 style）。所以必须拆开写：border: solid transparent 定义样式和默认色，再单独用 border-xxx-color 和 border-width 控制具体边。
容易踩的坑：
- 漏写
border: solid transparent—— 某些浏览器（如旧版 Safari）对透明边不渲染 - 用
border-color简写替代border-xxx-color—— 导致其他边颜色被意外重置 - 在
@include后又手动加border-width—— 属性冲突，最终以 CSS 层叠顺序为准，不可控
如何支持带边框的三角形（比如小箭头外圈有描边）
纯色三角形够用，但设计稿里常要求「带描边的箭头」，比如深灰底色上白色三角形+1px浅灰边。这没法靠单层 border 实现，得用伪元素叠加。
方案是封装两个 mixin：主 triangle 画填充层，再套一层 triangle-outline 画稍大的同向透明三角形作背景边框。两层用 position: absolute 对齐，偏移量 = 描边宽度。
实操要点：
- 描边宽度必须作为独立参数传入，不能硬编码，否则无法适配不同尺寸
- 外层三角形大小 = 内层大小 + 描边宽度，方向一致，颜色设为描边色
- 必须加
pointer-events: none到伪元素，避免遮挡点击区域 - 不要用
transform: scale()模拟描边——缩放会导致边缘模糊，且响应式下失真
在实际项目中怎么避免滥用和维护混乱
三角形 mixin 看似简单，但项目大了容易变成「到处 @include triangle(top, 6px)」，哪天设计改了全局箭头大小，就得全局搜替换。
更可持续的做法是绑定设计系统变量：
- 定义
$icon-size-sm: 6px、$icon-size-md: 8px等语义化变量，mixin 内部引用它们 - 颜色走
$color-primary、$color-icon这类主题变量，而不是写死#333 - 把 mixin 放进
_icons.scss或_utilities.scss，别塞进组件局部文件 - 禁用无参数调用，比如
@include triangle(top)—— 缺少大小参数时编译报错，比运行时出错好查
最常被忽略的是可访问性：纯装饰性三角形（如下拉箭头）要加 aria-hidden="true"，而作为信息传达的（如状态指示三角）需用 role="img" 并配 aria-label。mixin 本身不处理这个，但文档里得标清楚责任边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
