Less中用border实现分割线应抽成变量+Mixin，支持方向参数和颜色覆盖，避免CSS变量因兼容性、编译期计算缺失等问题导致主题管理失效，同时注意box-sizing、命名语义和团队规范。
Less中用border实现分割线的常见写法
直接写 border-bottom: 1px solid #e0e0e0; 最省事，但问题在于：颜色、粗细、样式（dashed / dotted）容易散落在各处，改主题色时要全局搜，漏改一两处就错乱。
更稳妥的做法是抽成变量 + Mixin。比如先定义：
@divider-color: #e0e0e0;<br>@divider-width: 1px;<br>@divider-style: solid;
再封装一个基础Mixin：
.divider() {<br> border-bottom: @divider-width @divider-style @divider-color;<br>}调用时只需
.divider();，语义清晰，改一处变量全生效。
如何让Mixin支持横向/纵向/多方向灵活控制
纯 bottom 不够用——列表项可能需要左右边框，卡片分隔可能要上下都有。所以Mixin得支持参数：
-
.divider()默认只设 bottom -
.divider(top)设 top -
.divider(both)同时设 top 和 bottom -
.divider(left, #999)支持覆盖颜色
实现上用 Less 的模式匹配和默认参数：
.divider(@dir: bottom, @color: @divider-color) when (@dir = bottom) {<br> border-bottom: @divider-width @divider-style @color;<br>}<br>.divider(@dir: top, @color: @divider-color) when (@dir = top) {<br> border-top: @divider-width @divider-style @color;<br>}<br>.divider(@dir: both, @color: @divider-color) when (@dir = both) {<br> border-top: @divider-width @divider-style @color;<br> border-bottom: @divider-width @divider-style @color;<br>}注意：Less 中
when 是条件编译，不是运行时判断，所以不会产生冗余 CSS。
为什么不能直接用CSS自定义属性替代Less变量
有人想用 --divider-color 配合 border-bottom: 1px solid var(--divider-color);，看似更“现代”。但问题明显：
- 浏览器兼容性：IE 完全不支持，部分老安卓 WebView 也不稳
- 无法在 Less 编译期参与计算：比如你想基于
@divider-color自动生成浅一层的 hover 色（lighten(@divider-color, 10%)），CSS 变量做不到 - Mixin 里没法做条件逻辑：CSS 变量没有
when或参数重载能力，横向/纵向切换只能靠多类名堆砌
所以主题色管理、条件生成、复用逻辑强的场景，Less 编译期处理仍是刚需。
立即学习“前端免费学习笔记（深入）”；
实际项目中容易忽略的细节
-
border 分割线会撑高容器：如果父元素没设 box-sizing: border-box，height: 44px 的 item 加了 border-bottom 就变成 45px，导致布局错位
- 横向分割线慎用
100% 宽度：若父容器有 padding，border-bottom 会超出，应配合 margin: 0 -@padding 或用伪元素
- Mixin 命名别太泛：避免叫
.line()，最好带语义，如 .section-divider() 或 .list-item-divider()，方便后期按用途筛选和替换
- 颜色变量建议用 HSL 或 Lab 表达：比如
@divider-color: hsl(0, 0%, 87%);，比十六进制更容易做明暗调节
border 分割线会撑高容器：如果父元素没设 box-sizing: border-box，height: 44px 的 item 加了 border-bottom 就变成 45px，导致布局错位 100% 宽度：若父容器有 padding，border-bottom 会超出，应配合 margin: 0 -@padding 或用伪元素 .line()，最好带语义，如 .section-divider() 或 .list-item-divider()，方便后期按用途筛选和替换 @divider-color: hsl(0, 0%, 87%);，比十六进制更容易做明暗调节 真正难的不是写出来，而是让所有团队成员都用同一个 Mixin，而不是有人手写 border: 1px solid #eee —— 这需要配合 ESLint + stylelint 规则或 Code Review 卡点。
