在Less中定义全局@border-radius变量需在根作用域声明并确保先于组件样式@import，推荐命名@border-radius: 6px;，配合mixin封装和CSS自定义属性实现主题切换与第三方库兼容。
Less中如何定义全局@border-radius变量并生效
直接在根作用域（如variables.less）里声明一个变量，所有用到圆角的地方都引用它，就能实现一处修改、全局响应。关键不是“能不能”，而是变量是否被后续样式真正引用——很多人改了@border-radius却没效果，是因为组件样式里写的是硬编码值（比如4px），根本没读这个变量。
- 推荐命名统一为
@border-radius或@radius-base，避免用@br这类缩写，后期排查难 - 值建议带单位，如
@border-radius: 6px;，不推荐@border-radius: 6;（less虽支持单位推导，但和calc()混用时易出错） - 确保该变量文件在所有组件样式之前
@import，顺序错了变量就是undefined
组件内部怎么安全地使用@border-radius变量
别在每个.button、.card里重复写border-radius: @border-radius;，容易漏、难维护。更稳妥的方式是封装一个mixin：
.rounded(@r: @border-radius) {
border-radius: @r;
}
然后在组件中调用：.button { .rounded(); }。这样既保持语义清晰，又支持局部覆盖（比如.button--square { .rounded(0); }）。
- 避免在mixin里写死
@border-radius，而是设为参数默认值，提升复用性 - 如果项目用了CSS-in-JS或Shadow DOM，Less变量不会穿透，得靠JS注入或CSS自定义属性兜底
- 注意IE11不支持
border-radius的多值简写（如4px 8px），但Less编译后只是普通CSS，这点和Less无关，需单独处理
如何让border-radius适配暗色模式或主题切换
Less本身不支持运行时换主题，所以不能靠@media (prefers-color-scheme: dark)动态改变量值。真要主题化圆角，得把@border-radius映射为CSS自定义属性：
立即学习“前端免费学习笔记（深入）”；
:root {
--radius: @{border-radius};
}
.dark-theme {
--radius: 8px;
}
再配合border-radius: var(--radius);使用。这样Less只管编译期默认值，运行时靠CSS变量接管。
- 不要在Less里用
~"var(--radius)"拼接，这会绕过类型检查，且无法被PostCSS插件识别 - 如果主题切换靠class控制（如
.theme-dark），记得给所有用到圆角的组件加对应选择器，否则新主题下仍走默认值 - 移动端iOS Safari对
var(--radius)在clip-path里的支持不稳定，圆角若用于裁剪，得回退到固定值
为什么改了@border-radius但某些组件没变
大概率是这些组件的样式来自第三方库（如Ant Design、Element Plus），它们的Less变量名和你定义的不一致，或者压根没暴露@border-radius配置项。比如Ant Design用的是@border-radius-base，Element Plus是--el-border-radius。
- 查文档确认目标库的变量名，别自己猜；有些库要求你通过
modifyVars传入，而不是直接@import - 用浏览器开发者工具检查计算后的
border-radius值，看它是来自你的样式，还是来自node_modules里的CSS文件 - 如果库不支持变量定制，只能用
!important覆盖，或写更高优先级的选择器（如.my-app .el-button { border-radius: @border-radius !important; }）
@border-radius就只是个安静的常量。 
