SCSS如何动态按需生成样式 避免生成大量无用工具类样式？

SCSS本身是预编译语言，运行时不会解析执行，所以没办法直接在HTML的class属性中调用SCSS函数动态生成样式，以下是三种常用的无冗余实现方案： #

方案1：用SCSS Mixin按需调用生成样式

提前把通用规则封装成mixin，只在需要用到的选择器里调用，不会生成多余的冗余代码：

// 定义通用mixin
@mixin padding-top($size) {
  padding-top: #{$size}px;
}

// 仅在需要的地方调用，不会额外生成多余样式
.modal-header {
  @include padding-top(4);
}
.card-content {
  @include padding-top(16);
}

编译后的CSS只会保留你实际调用过的样式：

.modal-header {
  padding-top: 4px;
}
.card-content {
  padding-top: 16px;
}

方案2：预生成全量工具类 + 打包裁剪冗余

如果习惯直接在HTML里写类名使用，可以先用SCSS循环生成全量的工具类，再配合PurgeCSS等工具在打包阶段自动删除项目中未使用的CSS类：

// 定义你需要的尺寸范围
$padding-top-sizes: 4, 8, 12, 16, 20, 24, 32, 40, 48;

@each $size in $padding-top-sizes {
  .v-slot-padding-top#{$size} {
    padding-top: #{$size}px;
  }
}

Vite、Webpack等主流打包工具都可以快速接入PurgeCSS，它会自动扫描所有HTML/Vue/JSX等模板文件里用到的类名，最终打包产物里只会保留你实际用过的工具类，完全没有冗余。

方案3：CSS变量实现动态类（零预生成成本）

不需要依赖SCSS编译，用原生CSS变量即可实现完全灵活的动态调用，直接在HTML里传入你需要的数值即可：

/* 定义通用基础类 */
.v-slot-padding-top {
  padding-top: calc(var(--pt, 0) * 1px);
}

HTML中直接使用，支持任意数值：

<!-- 上边距4px -->
<div class="v-slot-padding-top" style="--pt:4"></div>
<!-- 上边距16px -->
<div class="v-slot-padding-top" style="--pt:16"></div>
<!-- 上边距27px，不需要提前定义对应类 -->
<div class="v-slot-padding-top" style="--pt:27"></div>

这种方式完全不需要提前生成任何对应尺寸的类，零冗余，灵活度最高。

内容的提问来源于stack exchange，提问作者Igor Chestnov