应使用参数化@mixin progress-bar封装进度条：支持$color语义名映射主题色、$height/$radius控制尺寸与圆角、$mode切换inline/block布局及配套vertical-align/margin、$disabled内联禁用态样式，并通过@supports兜底accent-color与webkit伪元素兼容性。
直接用 @mixin 封装进度条样式，传参控制颜色、尺寸、内联/块级、是否禁用等行为，比写一堆 class 或硬编码更可控，也避免了 CSS 变量无法干预结构（如 progress::before 伪元素）的局限。
怎么用 @mixin progress-bar 支持主题色和尺寸配置
进度条不是只换一个 background-color 就完事——不同语境下需要主色、次色、禁用态、细条/粗条、圆角弧度。参数化 @mixin 是唯一能同时覆盖这些维度的方式。
- 颜色用
$color: primary这类语义名而非具体值，配合变量映射表（如$colors: (primary: #007bff, secondary: #6c757d)），方便统一替换 - 尺寸通过
$height: 8px控制条高，$radius: 4px控制圆角；若需响应式高度（如移动端缩为 4px），把$height设为 map 类型，内部用@each生成媒体查询 - 禁用态不靠额外 class，而是在 mixin 内加
@if $disabled { opacity: 0.5; pointer-events: none; }，调用时传$disabled: true即可
为什么不能只用 CSS 自定义属性控制进度条外观
CSS 变量只能替换值，无法决定是否渲染某段规则，比如：
-
progress.inline和progress.block的布局差异（display: inline-blockvsdisplay: block）无法靠变量切换 - 禁用时要同时关掉
pointer-events、降opacity、灰掉accent-color，变量得配 3 个，且 JS 更新时容易漏掉某一项 - 旧版 Safari 不支持
accent-color，需 fallback 到progress::-webkit-progress-value伪元素样式——这部分必须写死在 mixin 里，变量插不进去
如何让 @mixin progress-bar 支持内联（inline）与块级（block）两种模式
关键不是加个 $mode: block 参数就完事，而是得处理 display、vertical-align、margin 等配套样式，否则内联进度条会和其他文字基线错位。
- 设
$mode: block为默认，$mode: inline时强制display: inline-block+vertical-align: middle+margin: 0 4px - 别在 mixin 里写
&，尤其当它被嵌套在 Vue SFC 的<style scoped></style>下时，&会拼出意外选择器（如.foo progress被转成.foo[data-v-xxx] progress） - 如果项目用了 mini.css 风格（
max="1000"），在 mixin 里加注释说明：「请确保 HTML 中<progress max="1000"></progress>，否则value百分比计算会偏移」
容易被忽略的兼容性细节：Safari 的 accent-color 和伪元素 fallback
现代浏览器用 accent-color 最省事，但 Safari 15.4 之前不支持，必须手写 progress::-webkit-progress-value。Mixin 里得兜底。
- 不要写两套独立逻辑，用
@supports (accent-color: red) { accent-color: $color; }包一层，再用@else写 WebKit 伪元素 - Webkit 伪元素中，
background-image: linear-gradient($color, $color)比纯background-color更稳——某些 Safari 版本对纯色渲染有闪烁 - 禁用态下，WebKit 伪元素也要同步灰掉：
background-color: desaturate(lighten($color, 40%), 100%)，而不是简单写#ccc
真正难的不是写出来，是让 @mixin progress-bar 在 Vue 的 scoped style、Tailwind 的 JIT 编译、以及 PostCSS autoprefixer 多层介入后仍稳定输出预期 CSS——这意味着所有参数校验、map 解构、@supports 嵌套都得提前想清楚边界条件，而不是等编译报错才去翻 source map。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
