用Sass参数控制组件变体应统一顶层变量（如$btn-variant）、配合@if和@mixin在编译期生成样式，避免运行时class组合；用map管理配置、map-has-key校验参数、显式默认值、选择器拼接在Sass层完成，公共样式抽为独立mixin。
怎么用Sass参数控制组件变体的生成
直接靠 $variant 这类变量做条件判断，生成不同样式块是最稳的路子。Sass 的 @if 和 @mixin 组合能让你在编译期就决定要不要塞进某段 CSS，而不是靠 JS 运行时切 class——这意味着体积可控、无运行时开销、tree-shaking 友好。
- 别把变体逻辑写进 HTML class 名里（比如
btn--primary+btn--large+btn--disabled自由组合），那会爆炸式增长 class 数量，维护和审查都吃力 - 用一个顶层参数统一开关，比如
$btn-variant: primary，所有样式分支都基于它判断 - 参数值建议用 map 映射配置，方便后期加新变体不改逻辑，只补配置
Sass mixin 里怎么安全读取和校验参数
传错参数类型或拼错值名，Sass 编译不会报错，但可能静默失效——比如 size: "lg" 写成 size: "large"，而你的 map 里只定义了 lg，结果啥都没生成。
- 用
map-has-key($map, $key)检查参数是否合法，不合法就@warn提示 - 避免直接用
@if $variant == primary，要写成@if $variant == "primary"（字符串比对更可靠） - 默认值必须显式声明，比如
@mixin button($variant: "default")，不然调用时漏传会报Undefined variable
为什么不能在 :is() 或 :where() 里动态插 Sass 变量
因为 :is() 是 CSS 运行时语法，Sass 变量在编译阶段就被替换成字面值了，你写 :is(.btn-#{$variant}) 看似聪明，实际会生成类似 :is(.btn-"primary") 这种非法选择器，浏览器直接忽略整条规则。
- 所有选择器拼接必须在 Sass 层完成，比如用
#{}插入前缀：.btn-#{$variant} { ... } - 如果想复用同一套样式逻辑给多个变体，用
@each遍历 map，而不是试图让 CSS 函数“理解”Sass 变量 - 别为了“看起来简洁”把选择器逻辑挪到 HTML 或 JS 里，那等于放弃 Sass 的静态分析优势
变体之间共享样式怎么避免重复输出
多个变体共用 padding、border-radius 这些基础样式，如果每个 @if 分支里都写一遍，CSS 体积会膨胀，且修改时容易漏掉某个分支。
立即学习“前端免费学习笔记（深入）”；
- 把公共样式单独抽成
@mixin button-base，在所有变体分支外先调用一次 - 颜色、背景等差异属性才放进
@if分支里，确保只有真正不同的部分被条件生成 - 注意嵌套层级：如果在
.btn下写&--primary，再在里面调@include button-base，会导致 base 样式被包裹进.btn--primary选择器下，失去复用性
最麻烦的其实是响应式变体叠加——比如 mobile-primary 和 desktop-secondary。这时候参数得设计成二维结构（$mode: (size: "sm", theme: "dark")），而且校验逻辑会变重。别图省事用字符串拼接，老老实实建嵌套 map，编译慢点也比线上样式错乱强。
