less 没有 sin()、cos()、tan() 等三角函数，官方内置函数仅限基础算术与单位处理，调用会报错“undefined function”；三角计算需交由 css 运行时（如 calc() 配合 js 或自定义属性）或 javascript 动态完成。
Less 本身不支持 sin()、cos()、tan() 等三角函数，所有数学函数均限于基础算术与单位处理；想用三角函数做图形布局，必须交由 CSS 运行时（如 calc() + 自定义属性）或 JS 控制，Less 编译期无法参与。
Less 有没有 sin/cos/tan 函数？
没有。Less 官方内置函数列表中从未包含任何三角函数，sin()、cos()、atan2() 等在 Less 里是未定义的，直接调用会报错 undefined function sin。
常见错误现象：
-
transform: rotate(sin(45deg) * 100deg);→ 编译失败 -
@x: cos(@angle) * @radius;→Unrecognised input或Function cos is undefined
Less 的数学能力仅覆盖：percentage()、round()、unit()、convert()、四则运算符及 min()/max()（编译期静态求值），全部运行在构建阶段，不涉及几何函数。
那怎么在 CSS 中实现 sin/cos 布局？
必须放弃“Less 编译期计算角度坐标”的想法，改用运行时方案。核心思路是：把三角逻辑交给浏览器，Less 只负责组织变量和结构。
可行路径有两条：
- 用
calc()+ CSS 自定义属性：把角度和半径设为--angle: 45deg、--r: 100px，再用transform: translate(calc(cos(var(--angle)) * var(--r)), calc(sin(var(--angle)) * var(--r)));—— 但注意：CSS 原生也不支持sin()/cos()，这行代码会无效 - 真正能用的，是
transform: rotate()、skew()、matrix()等已有变换，或借助 JS 动态写入style.left/top，配合Math.sin()/Math.cos()
也就是说：Less 可以帮你生成一组预设角度的 class（比如 .orbit-30、.orbit-45），但每个 class 的位移值得手动算好或用脚本生成，不能靠 Less 实时算。
能不能用 JS 预处理 + Less 输出静态值？
可以，但这已脱离 Less 本身能力，属于构建流程增强。例如：
- 写一个 Node.js 脚本，遍历
0deg~360deg步进15deg，用Math.cos(angle * Math.PI / 180)算出系数 - 输出 Less 变量块：
@cos-30: 0.866; @sin-30: 0.5; - 在 Less 中引用：
left: calc(@cos-30 * 200px); top: calc(@sin-30 * 200px);
这种做法有效，但代价是失去响应式灵活性——所有值都是编译期快照，角度一变就得重跑脚本。而且 calc() 里的乘法只支持数字 × 长度（如 0.866 * 200px），不能写 @cos-30 * @radius 后再塞进 calc()，因为 Less 不会把变量注入到字符串里再解析。
为什么官方不加 sin/cos？
不是遗漏，是定位问题。Less 是 CSS 预处理器，目标是提升书写效率与可维护性，不是替代 JS 或成为前端计算引擎。角度计算本质是动态几何问题，涉及浮点精度、单位归一、弧度/角度转换、浏览器兼容性（比如 cos(0deg) 在某些旧引擎行为不一），这些都远超样式表职责边界。
真正容易被忽略的一点是：即使未来某版 Less 加了 sin()，它也只能返回一个静态数值（如 sin(45deg) → 0.70710678），而无法联动视口变化、滚动、交互状态——那些才是图形布局的真实需求场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
