SCSS mixin 生成类名 控制间距

使用 SCSS mixin 生成可复用的类名 间距类名

首先，创建一个名为 _spacing.scss 的 SCSS 文件，并添加以下代码：

@mixin spacing($property, $i, $value) {
  &t-#{$i} {
    #{$property}-top: $value;
  }
  &r-#{$i} {
    #{$property}-right: $value;
  }
  &b-#{$i} {
    #{$property}-bottom: $value;
  }
  &l-#{$i} {
    #{$property}-left: $value;
  }
  &x-#{$i} {
    #{$property}-left: $value;
    #{$property}-right: $value;
  }
  &y-#{$i} {
    #{$property}-top: $value;
    #{$property}-bottom: $value;
  }
  &-#{$i} {
    #{$property}: $value;
  }
}

// $base: 大小，$multiplier：数量；例如 $base: 8px, $multiplier: 3，生成类似 .pt-0、.mt-3 等类名
@mixin generate-spacing-classes($base, $multiplier) {
  @for $i from 0 through $multiplier {
    .p {
      @include spacing(padding, $i, $base * $i);
    }
    .m {
      @include spacing(margin, $i, $base * $i);
    }
  }
}

接下来，创建一个名为 styles.scss 的 SCSS 文件，并引入刚才创建的 _spacing.scss 文件，并添加以下代码：

@use 'spacing' as spacing;

.my-div {
  background-color: lightblue;
  width: 200px;
  height: 200px;
}

@include spacing.generate-spacing-classes($base: 10px, $multiplier: 3);

在上述代码中，我们首先通过 @use 引入了 _spacing.scss 文件，并将其命名为 spacing 模块。然后，我们创建了一个名为 .my-div 的类。最后，调用 spacing.generate-spacing-classes mixin，生成具有不同间距的类名。

通过使用 SCSS 的 @use 导入其他模块，我们可以更好地组织和管理样式文件，并避免命名冲突。

接下来，在 HTML 文件中使用这些类名来应用间距样式：

<div class="my-div pt-1 pl-2"></div>
<div class="my-div mt-2 mx-3"></div>

第一个 <div> 元素将应用 padding-top: 10px; padding-left: 20px; 的样式，而第二个 <div> 元素将应用 margin-top: 20px; margin-left: 30px; margin-right: 30px; 的样式。

通过使用 SCSS mixin 生成的可复用类名，我们可以轻松地为不同的元素添加不同的间距样式，而不需要重复编写大量的 CSS 代码。