SCSS 不支持 sin()、cos() 等数学函数，无法动态计算几何坐标；唯一可行方式是用 #{"..."} 插值拼接已知坐标的 polygon() 字符串，或交由 JavaScript 在运行时计算并注入 CSS 变量。
SCSS 本身没有 sin()、cos() 等数学函数
你写 sin(0.5) 或 cos($angle) 会直接报错：SassError: Undefined function。Dart Sass（当前唯一官方编译器）只支持 +、-、*、/、% 这些基础运算符，所有三角函数、对数、幂运算在 SCSS 编译期都不存在。
这意味着：你无法用 SCSS 动态计算一个扇形的顶点坐标并生成 clip-path: polygon(...) 的完整坐标列表——除非手动硬编码，或用近似公式模拟（不推荐，精度差、难维护）。
- 想生成动态多边形（比如 $n 边形、扇形展开），必须把坐标计算逻辑交给运行时：用 JavaScript 生成坐标数组，再注入 CSS 自定义属性或内联样式
- 若坚持用 SCSS 预生成，只能针对固定参数（如 6 边形、90° 扇形）写死坐标，或用
@for循环配合已知角度步长拼字符串 -
@function sector-polygon($angle, $steps)这类写法看似可行，但内部若调用cos()就会崩；真正能用的只有角度转弧度的系数换算（如$rad: $deg / 180 * 3.14159），而 cos/sin 值仍需外部提供
用 SCSS 拼接 polygon() 坐标字符串是唯一可行路径
SCSS 能安全做的，是把已知数值（比如预设好的 6 个顶点百分比）用 #{} 插值进 polygon() 字符串中，并确保格式合法：空格分隔、单位统一（% 或 px）、括号闭合。
例如生成正六边形（顶点坐标已人工算好）：
立即学习“前端免费学习笔记（深入）”；
.hexagon {
clip-path: polygon(
#{"50% 0%"},
#{"100% 25%"},
#{"100% 75%"},
#{"50% 100%"},
#{"0% 75%"},
#{"0% 25%"}
);
}- 所有坐标必须是字符串形式，不能写成
50% 0%（无引号）——SCSS 会当作两个值报错 - 用
#{"..."}包裹，避免空格/括号被误解析 - 若用
@for循环生成，注意循环变量是数字，需手动映射到 0–100 范围并加%单位，例如：#{$x * 100}% #{$y * 100}% - 浏览器对
polygon()坐标容错极低：少一个逗号、多一个空格、单位缺失，整个裁剪就会失效（退回到矩形）
clip-path: polygon() 的单位与坐标系陷阱
polygon() 默认使用元素自身尺寸的相对坐标：0% 0% 是左上角，100% 100% 是右下角。但如果你混用 px 和 %（比如 10px 50%），部分浏览器会静默失败或行为不一致。
- 务必统一单位：全用
%（推荐，响应式友好）或全用px（仅当容器尺寸固定） - SCSS 插值时，变量必须带单位（如
$x: 50%），否则#{$x}输出为50，变成50 0%→ 无效语法 - 不要依赖 SCSS 计算几何位置：比如“让第 3 个点位于右侧 1/3 处”，应写成
66.6667%而非100% / 3 * 2—— SCSS 不支持单位参与除法（100% / 3报错） - 移动端 Safari 对复杂
polygon()的渲染有轻微偏移，建议用transform: translateZ(0)强制硬件加速
真正动态多边形该交给 JS + CSS 变量
如果需要根据数据实时生成裁剪路径（比如用户拖拽调整扇形角度、点击添加顶点），SCSS 完全不合适。此时正确路径是：
- 用 JavaScript 计算顶点坐标（可用
Math.cos()、Math.sin()），转成"x1% y1%, x2% y2%, ..."字符串 - 写入 CSS 自定义属性：
document.documentElement.style.setProperty('--clip-pts', '50% 0%, ...') - SCSS 中只消费它：
clip-path: polygon(var(--clip-pts)); - 这样既保留运行时灵活性，又让 SCSS 专注样式组织，不越界处理逻辑
硬用 SCSS 模拟数学函数（比如泰勒展开逼近 sin），不仅结果不准，还会让编译变慢、调试困难——这些计算本就不该发生在构建阶段。
