<p>SCSS变量无法驱动运行时rotate动画，因其仅编译时生效；应通过mixin封装角度计算（如@mixin progress-rotate($p) { transform: rotate((($p 3.6) - 90) 1deg); }），配合CSS变量或JS动态更新--rotate-right等自定义属性实现真交互。</p>
SCSS里不能直接用变量驱动rotate动画
SCSS变量（比如 $progress）在编译时就固化成静态值，改了变量、重编译后CSS才变，但页面上不会“动起来”。你看到的旋转效果必须靠运行时控制——要么切换 class，要么用 JS 改 style.transform。SCSS 只能帮你算角度、生成条件样式或封装 mixin，别指望它实时响应数据变化。
用SCSS mixin封装角度到rotate的换算逻辑
进度百分比转 rotate 角度有固定公式：起始方向对齐 12 点钟（即 -90deg 偏移），再按 360° × progress% 计算。SCSS 可以把这步算清楚，避免 JS 里重复写错。
示例 mixin：
@mixin progress-rotate($p) {
transform: rotate((($p * 3.6) - 90) * 1deg);
}使用时：
立即学习“前端免费学习笔记（深入）”；
.progress-right { @include progress-rotate(65); }注意点：
- 括号必须完整：
((...)-90) * 1deg，漏括号会导致单位解析失败，浏览器静默忽略 - 不能写
rotate($p * 3.6deg - 90deg)—— SCSS 不支持运算符跨单位混用 - 如果要兼容 IE，得加
-webkit-transform前缀，mixin 里一并处理更稳妥
左右半圆的 transform-origin 必须分别设置
环形进度条拆成左右两个半圆时，它们的旋转中心点不同：右半圆绕左边缘转（transform-origin: center left），左半圆绕右边缘转（transform-origin: center right）。SCSS 里容易统一写成 center center，结果就是整个圆偏移、错位。
正确写法示例：
.progress-left .progress-bar {
transform-origin: center right;
}
.progress-right .progress-bar {
transform-origin: center left;
}常见错误现象：
- 旋转时圆环“漂移”出容器，是
transform-origin没对齐遮罩边界 - 进度到 50% 后突然跳变，大概率是左右两段的 origin 或初始 rotate 值没对齐
- 用 % 单位写角度（如
rotate(75%)）——非法语法，浏览器不报错但无效
JS 控制时，优先更新 CSS 自定义属性而非内联 style
比起反复调用 element.style.setProperty('transform', ...)，把 rotate 值存进 --rotate-left 和 --rotate-right 这类自定义属性更干净，也方便 SCSS 配合媒体查询或主题切换。
JS 示例：
document.documentElement.style.setProperty('--rotate-right', `${rightDeg}deg`);
document.documentElement.style.setProperty('--rotate-left', `${leftDeg}deg`);CSS 中引用：
.progress-right .progress-bar {
transform: rotate(var(--rotate-right, 0deg));
}这样做的好处：
- 避免内联 style 覆盖掉关键 transition 声明
- SCSS 可以用
#{var(--rotate-right)}在 calc() 里参与计算（需配合calc()函数） - 调试时直接在 DevTools 修改
--rotate-right就能看到实时效果，不用改 JS
实际最难调的是左右两段衔接处的视觉连续性——49% 和 51% 之间那 2% 的过渡，稍有偏差就会出现“断层感”，这需要精确控制两段的 border-radius、origin、初始 rotate 和动画 timing-function，不能只依赖 SCSS 算数。
