气泡提示框三角箭头必须四边显式声明border，因border简写会重置所有边的style和color，破坏斜接关系导致箭头变形或消失；正确做法是全写四边并统一用solid，方向参数$dir语义为“留色边”而非“箭头朝向”，如$dir: top对应border-bottom-color生效。
气泡提示框的三角箭头必须四边显式声明 border
直接用 border 简写（比如 border: 6px solid transparent）再单独覆盖某一边，会导致三边透明失效——border 简写会重置所有边的 style 和 color，破坏斜接关系，箭头要么变形，要么完全消失。
正确做法是四条边全部显式写出，且统一用 solid（或旧版 Safari 推荐的 dashed transparent）：
@mixin tooltip-arrow($dir, $size, $color) {
position: relative;
&::before {
content: "";
position: absolute;
// 四边必须全写，不可省略
border-top: $size solid transparent;
border-right: $size solid transparent;
border-bottom: $size solid transparent;
border-left: $size solid transparent;
// 留色边才是关键：$dir 表示“哪边留色”，不是“箭头朝哪”
@if $dir == top {
border-bottom-color: $color;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
}
@if $dir == bottom {
border-top-color: $color;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
@if $dir == left {
border-right-color: $color;
right: 100%;
top: 50%;
transform: translateY(-50%);
}
@if $dir == right {
border-left-color: $color;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
}
}
注意：content: "" 不可省略，否则伪元素不渲染；transform 用于精确定位，避免像素偏移。
方向参数 $dir 的语义是“留色边”，不是“箭头朝向”
这个反直觉点是多数人踩坑的根源。SCSS 编译不会报错，但逻辑错会导致样式完全不对：
-
$dir: top→ 实际靠border-bottom-color生效（箭头朝上，对边留色） -
$dir: bottom→ 靠border-top-color生效 -
$dir: left→ 靠border-right-color生效 -
$dir: right→ 靠border-left-color生效
别试图用插值写 border-#{$dir}-color：对 top/bottom 它语法合法但语义错误，生成的 CSS 是无效的（比如 border-top-color 对朝上的箭头毫无作用）。
气泡主体与箭头需共用定位上下文
箭头伪元素依赖主体的 position: relative，但主体本身不能设 overflow: hidden（会裁掉箭头），也不能用 transform（会创建新层叠上下文，导致 z-index 失效）：
- 主体推荐用
position: relative+z-index控制层级 - 箭头伪元素用
position: absolute，并确保其z-index≤ 主体 - 若主体有圆角，箭头尖端要避开圆角区域，通常加
margin-top/margin-left微调 - 移动端高 DPR 设备下，箭头尺寸建议用
px（避免缩放失真），不要用rem或em
响应式下箭头尺寸和颜色需联动控制
小屏幕下箭头太大会撑开气泡，大屏下太小又不明显。建议把尺寸和颜色封装进同一组参数，避免调用时漏配：
.tooltip {
@include tooltip-arrow(top, 6px, #333);
@media (max-width: 768px) {
@include tooltip-arrow(top, 4px, #555);
}
}
更稳妥的做法是让 @mixin 支持断点参数，但要注意：SCSS 无法在 mixin 内部动态插入媒体查询块（@content 位置受限），所以推荐由调用方控制响应式逻辑，mixin 只负责单点渲染。
真正容易被忽略的是：箭头颜色必须和气泡背景色保持视觉一致性，但不能硬编码——应通过变量传入，否则换主题时要改两处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
