如何用SCSS自动生成CSS间距工具类-css教程-PHP中文网

不能手写.m-1到.m-24类名，因其属反模式：维护困难、无法语义化命名、负边距需额外逻辑、css体积无意义膨胀；必须用@each遍历map，键须加引号、值须带单位，且margin与padding应分属不同map。

如何用scss自动生成css间距工具类

为什么不能手写 .m-1 到 .m-24 这类类名

手写一堆 margin/padding 工具类是反模式：改一个数值就得全局搜替换，无法复用语义命名（比如 xs、lg），负边距（如 m-n2）也得另起一套逻辑。更糟的是，CSS 体积会无意义膨胀——.m-123 这种类几乎永远不会被用到。

必须用 @each 遍历 map，且键和值要严格合规

编译报错 Invalid null operation 或 Undefined variable "key"，90% 出在键名没加引号或值缺单位。

键名如果是字符串（如 "sm"、"lg"），必须带引号："sm": 0.375rem ✅，sm: 0.375rem ❌
值必须带单位：0.5rem ✅，0.5 ❌（Sass 视为纯数字，参与运算时报错）
数字键可不加引号（1: 0.25rem 合法），但为统一性和可读性，建议全用字符串键："1": 0.25rem
margin 和 padding 应分属不同 map，避免后期误改影响语义

嵌套 @each 生成方向类（如 .mt-2、.px-3）

核心是三层分离：类型（m/p）、方向（t/b/x/y）、尺寸键名（"2"）。方向映射里 "x" 对应 "left right"，"y" 对应 "top bottom"，这样能自动展开双边声明。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

示例结构关键片段：

$spacing-types: ("m": "margin", "p": "padding");
$spacing-directions: ("t": "top", "b": "bottom", "x": "left right", "y": "top bottom");
$spacers: ("1": 0.25rem, "2": 0.5rem, "3": 1rem);

@each $type-key, $type-prop in $spacing-types {
  @each $dir-key, $dir-prop in $spacing-directions {
    @each $size-key, $size-val in $spacers {
      .#{$type-key}#{$dir-key}-#{$size-key} {
        @if $dir-prop == "left right" {
          #{$type-prop}-left: $size-val;
          #{$type-prop}-right: $size-val;
        }
        @else if $dir-prop == "top bottom" {
          #{$type-prop}-top: $size-val;
          #{$type-prop}-bottom: $size-val;
        }
        @else {
          #{$type-prop}-#{$dir-prop}: $size-val;
        }
      }
    }
  }
}

扩展 Bootstrap 的 $spacers 时顺序不能错

想让 Bootstrap 自带的 make-spacer-utilities() 函数读到你改过的 $spacers，导入顺序必须死守：

先 @import "bootstrap/scss/functions";
再 @import "bootstrap/scss/variables";
紧接着定义你的 $spacers map（必须在这一步）
最后 @import "bootstrap/scss/utilities"; 和 @import "bootstrap/scss/utilities/spacing";

漏掉 variables 或把 $spacers 放在 utilities/spacing 之后，就会报 Undefined variable "$spacers"。这不是配置问题，是作用域和执行顺序问题。