不能。sass 4.0+ 的 math 模块已移除 sin/cos 函数，因 css 运行时无法保证浮点精度且浏览器原生不支持；替代方案是预计算值、查表法或用 transform: rotate() + translate() 实现圆周布局。
sin 和 cos 在 Sass 中能直接用吗？
不能。Sass 4.0+ 的 math 模块不提供 sin 或 cos 函数，官方明确移除了这些三角函数——因为 CSS 运行时无法复现浮点精度，且浏览器原生不支持。你看到的某些旧教程里用的 sin()，大概率是自定义函数或依赖 sass-math 这类第三方库，但它们在 Dart Sass（当前标准）中已失效。
替代方案：用预计算值 + 自定义函数模拟圆周定位
真实项目里做圆周布局（比如环绕中心的图标、菜单项），核心诉求其实是「算出每个元素的 left 和 top 偏移」。这完全可以通过预计算角度、转为弧度、再用近似公式或查表法解决，无需运行时三角运算：
-
math.pi是可用的，math.div($angle, 180) * math.pi能转弧度 - 若需高精度，提前用 JS/Python 算好 sin/cos 值，存成 Sass map（如
$cos-values: (0: 1, 30: 0.866, 45: 0.707, ...)） - 更轻量的做法：用
math.cos()和math.sin()？等等——Dart Sass 仍不支持。别试了，会报错Undefined function "sin"
实操：用 CSS transform: rotate() + translate() 绕开数学限制
这才是现代 Sass 项目里最可靠、零计算误差的圆周布局写法。原理是让每个子元素继承父容器旋转，再用 translateX 向右平移固定半径，视觉上就落在圆周上：
@use "sass:math";
<p>$radius: 120px;
$item-count: 6;</p><p>.circle-layout {
position: relative;
width: $radius <em> 2;
height: $radius </em> 2;
}</p><p>.circle-layout > * {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}</p><p>@for $i from 0 through $item-count - 1 {
.circle-layout > <em>:nth-child(#{$i + 1}) {
// 每个元素旋转对应角度，再沿 X 轴平移半径
transform: translate(-50%, -50%) rotate(#{$i </em> 360deg / $item-count}) translate($radius) rotate(#{-$i * 360deg / $item-count});
}
}</p>
注意最后那个反向 rotate()：它抵消了父级旋转对子元素自身朝向的影响，否则所有图标都会歪着。
为什么不用 JavaScript 动态计算？
如果圆周项是静态的（比如导航菜单固定 8 个按钮），Sass 编译时生成 CSS 更高效；JS 计算适合动态增删节点或响应式半径变化的场景。但要注意：transform 方案在 IE11 下需加 -ms- 前缀，而 math 模块本身不兼容 IE —— 所以如果你还必须支持 IE，连 math.pi 都不能用，得退回到硬编码数值。
真正容易被忽略的是：圆周布局的「中心点」默认是元素盒模型中心，但若子元素有不同宽高或 border，translate(-50%, -50%) 可能偏移。这时候得用 transform-origin 显式设为 center，或者改用 inset + calc() 组合——不过那就脱离 Sass 数学模块了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
