sass 进度条应通过变量控制颜色、mixin 封装结构动画、函数谨慎处理单位、@each 仅用于外观属性；避免过度参数化，以实际需求为准。
用 $track-color 和 $fill-color 控制进度条主色与填充色
进度条最常被改的就是颜色，但硬编码写死 background-color 会导致每次换主题都要搜替换。Sass 的变量参数化就是为这事设计的——把颜色抽成可传入的变量，组件本身不绑定具体值。
实操建议：
- 定义默认值：
$track-color: #e0e0e0 !default;，$fill-color: #4caf50 !default;，加!default是为了允许在引入前覆盖 - 在组件样式中用
background-color: $track-color;和background-color: $fill-color;，别写#ccc或theme.colors.primary - 避免把颜色逻辑塞进函数里（比如
progress-color($type)），除非你真有 5+ 种语义色要动态映射，否则徒增理解成本
用 @mixin progress-bar 封装可复用的结构和动画逻辑
纯 CSS 写进度条容易重复：外层容器设 overflow: hidden、内层用 transform: scaleX() 或 width 控制长度、加过渡动画……这些不该每次重写。
实操建议：
- 写一个带参数的 mixin：
@mixin progress-bar($height: 8px, $ease: ease-out)，高度和缓动都留钩子 - 在 mixin 里直接写好伪元素撑开轨道、
transition: width $ease .2s这类通用规则，不依赖外部 class 命名 - 别在 mixin 里写具体尺寸单位（如
height: 4px），一律用参数传入，否则失去灵活性 - 如果项目用 CSS-in-JS 或 Tailwind，这个 mixin 就不该存在——Sass 组件的前提是“你还在手写 CSS”
用 @function progress-width 计算百分比值时小心单位丢失
有人喜欢写个函数把数字转成带 % 的字符串：@function progress-width($p) { @return #{$p}%; }，看着干净，但实际会踩坑。
常见错误现象：
- 传入
progress-width(75)得到"75%"字符串，Sass 会把它当纯文本，无法参与 calc() 或与其他数值运算 - 后续想叠加 margin：
margin-left: progress-width(75) + 10px→ 报错 “Incompatible units”
正确做法：
- 直接用原生单位：
width: $p * 1%，Sass 会自动计算并保留单位类型 - 如果非要封装函数，返回带单位的数值：
@function progress-width($p) { @return $p * 1%; } - 注意
$p本身不能带单位（比如75px），否则75px * 1%无意义
生成多态进度条时，@each 循环别滥用嵌套选择器
需要支持「小号/中号/大号」或「线性/环形/分段」进度条时，很容易用 @each 套一堆 class，结果编译出几十行重复 CSS。
使用场景：
- 只对尺寸、圆角、字体大小这类纯外观属性用循环；核心结构（如环形要用
border-radius: 50%）应单独写 - 避免：
@each $size, $conf in $sizes { .progress-#{$size} { @include progress-bar($conf...); } }—— 这会让每个尺寸都复制一整套 transition、overflow 等规则 - 推荐：用单一 class（如
.progress）承载基础样式，再用修饰类（.progress--sm）覆盖尺寸，Sass 只管生成修饰类 - 如果最终输出 CSS 被 PurgeCSS 扫掉 80%，说明你生成了太多用不到的变体
真正难的不是写 Sass 函数，而是判断哪些逻辑该参数化、哪些该由使用者自己写。比如动画时长要不要暴露为参数？如果产品规范明确要求所有进度条都是 .3s，那就别加 $duration 参数——自由度不是越多越好，是刚好够用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
