less无法实现运行时动态圆角，必须依赖css变量（--radius）+js或媒体查询；改@border-radius-base无效主因是组件未引用该变量或未正确@import变量文件，第三方库需通过var(--radius)桥接，mixin封装更可控且支持局部覆盖。
Less 本身无法实现“动态”圆角——它编译完就固定了，真要运行时响应变化，必须靠 CSS 变量（--radius）+ JS 或媒体查询驱动，Less 只负责提供变量定义和复用逻辑。
为什么改了 @border-radius 却没生效
常见现象：改了 @border-radius-base: 8px;，按钮圆角变了，但弹窗、下拉菜单还是直角。根本原因不是 Less 失效，而是这些组件样式压根没引用这个变量。
- Less 没有全局作用域，
@border-radius-base只在当前文件或明确@import进来的上下文中有效 - 检查目标组件的 Less 文件顶部，是否
@import 'variables.less';（路径要对） - 第三方 UI 库（如 Ant Design）的样式不读你的变量，要么覆盖类（慎用
!important），要么桥接到 CSS 变量：border-radius: var(--radius, 4px); - 别写硬编码值，比如
border-radius: 4px;—— 这种写法让变量完全失效
如何用 Less 安全封装圆角逻辑
直接在每个选择器里写 border-radius: @border-radius-base; 容易漏、难维护。Mixin 是更可控的方式：
.rounded(@r: @border-radius-base) {
border-radius: @r;
}
- 调用时可统一：
.btn { .rounded(); } - 支持局部覆盖：
.btn--square { .rounded(0); } - 避免在 Mixin 内部硬写
@border-radius-base，而是设为参数默认值，提升复用性 - 如果项目用了 CSS-in-JS 或 Shadow DOM，Less 变量不会穿透，得靠 JS 注入
style.setProperty()或 CSS 自定义属性兜底
移动端和兼容性容易踩的坑
圆角最终输出为标准 CSS border-radius，但不同环境表现不一：
- iOS Safari（尤其是旧版）对
border-radius: 50%;或复合值（如2px / 4px）支持不稳，建议坚持单像素值，如@border-radius-base: 6px; - 不要用
em或rem单位定义圆角变量，缩放时比例会失真 - 如果圆角用于
clip-path或overflow: hidden容器，iOS Safari 对var(--radius)支持不稳定，需回退到固定值 -
border-radius: 50%不等于胶囊按钮——它依赖宽高比，内容变多或容器受限时会拉成椭圆；真正自适应应算高度一半：border-radius: round(@height / 2);
想让圆角随主题/状态实时切换？Less 做不了，得靠 CSS 变量
Less 是编译时工具，@border-radius 在构建阶段就固化了。运行时切换（比如暗色模式、用户偏好）必须交由 CSS 变量处理：
:root {
--radius: 8px;
}
.dark-theme {
--radius: 12px;
}
- 组件中写：
border-radius: var(--radius, 4px);（带 fallback 防崩塌） - JS 修改：
document.documentElement.style.setProperty('--radius', '6px');（别漏单位！） - 动画限制：CSS 变量不能直接被
transition监听，需配合border-radius: calc(var(--radius) * 1);触发重绘（部分浏览器仍有限制） - 别在 Less 里拼接：
~"var(--radius)"—— 类型不可控，PostCSS 插件也无法识别
真正复杂的地方不在怎么写变量，而在于变量是否被所有相关样式消费、是否在正确的作用域被导入、以及运行时场景（JS 主动修改、媒体查询、主题 class 切换）能否被 CSS 变量承接住——Less 只管前半程，后半程得靠 CSS 和 JS 配合落地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
