使用.triangle("up", 6px, #007bff)等mixin可避免手写border三角形时漏边、透明色写错、单位缺失等人为错误，其通过统一border简写+单边着色实现语义清晰、编译稳定、容错性强。
直接用 .triangle("up", 6px, #007bff) 这类 mixin 调用就能生成，不用手写四条 border —— 手写极易漏边、单位缺失或透明色写错，而封装后的 mixin 把方向、尺寸、颜色三要素收束到一行，编译结果稳定可预期。
为什么手写 border 三角形总出错
不是浏览器不支持，是人容易踩几个硬坑：
-
border-bottom: 6px solid #333单独写，缺了其他三边 → 浏览器按默认border-style: none渲染，三角形直接消失 - 把
transparent写成none、0或unset→ 语法无效，整条border声明被丢弃 -
@size: 6不带单位 → 编译成border: 6 solid transparent，浏览器不认无单位数值，样式失效 - 元素宽高为
0，但默认是inline级别 → 受父容器line-height和vertical-align干扰，常出现底部留白或上下偏移
必须用引号包裹方向参数
Less 的 & when (@direction = up) 是严格字符串匹配，不是变量查找：
- ✅ 正确：
.triangle("up", 6px, #007bff) - ❌ 错误：
.triangle(up, 6px, #007bff)（up被当未定义变量，fallback 到第一个分支） - ❌ 错误：
.triangle(“up”, 6px, #007bff)（中文引号，编译报错） - 大小写敏感：
"Up"≠"up"，后者才匹配成功
推荐的 .triangle() mixin 写法
用 border 简写统一设四边宽度和透明色，再单边覆盖颜色，语义清晰且容错强：
.triangle(@direction, @size, @color: currentColor) {
width: 0;
height: 0;
border: @size solid transparent;
& when (@direction = "up") {
border-bottom-color: @color;
}
& when (@direction = "down") {
border-top-color: @color;
}
& when (@direction = "left") {
border-right-color: @color;
}
& when (@direction = "right") {
border-left-color: @color;
}
}
- 调用时只写
.triangle("down", 8px, #666)，不用记哪边该着色 - 若需兼容 IE11，得拆成四个独立 mixin（如
.triangle-down()），因为 IE11 不支持& when - 伪元素场景下，务必加
display: block或display: inline-block+vertical-align: top消除基线干扰
真正难的不是画出三角形，而是让它在 flex 容器里不被压缩、在缩放时不变形、在深色模式下不意外继承错误颜色——这些都得靠显式声明 border-color、固定单位（优先 px）、以及对父级定位和溢出行为的预判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
