css - 基于某些值生成 SCSS mixin？

Question

假设你有一堆像这样的变量:

/* spacing */
$spacing-extra-small: 0.25rem;
$spacing-small: 0.5rem;
$spacing-medium: 1rem;
$spacing-large: 2rem;
$spacing-extra-large: 4rem;

你想创建一堆功能性的 mixin 来做一件事，例如将 padding-right 设置为这些值，比如:

@mixin pr0 {
    padding-right: 0;
}

@mixin pr1 {
    padding-right: $spacing-extra-small;
}

@mixin pr2 {
    padding-right: $spacing-small;
}

@mixin pr3 {
    padding-right: $spacing-medium;
}

@mixin pr4 {
    padding-right: $spacing-large;
}

@mixin pr5 {
    padding-right: $spacing-extra-large;
}

有没有办法将其编写为循环或类似的东西，以便更容易地生成这些混入？

Answer 1

您可以创建一个循环，然后像这样在变量 $spacer 中定义不同的值。无需每次都创建 mixins。

$spacer: (0, 5px, 10px, 15px); // Add your values here

@each $size in $spacer {
  .p-#{$size} {
    padding: #{$size};
  }

  .pl-#{$size},
  .px-#{$size} {
    padding-left: #{$size};
  }

  .pr-#{$size},
  .px-#{$size} {
    padding-right: #{$size};
  }

  .pt-#{$size},
  .py-#{$size} {
    padding-top: #{$size};
  }

  .pb-#{$size},
  .py-#{$size} {
    padding-bottom: #{$size};
  }
}

尝试在 http://beautifytools.com/scss-compiler.php 中运行此代码你会看到输出。此解决方案不限于 padding-right。如果您只需要 padding-right 的解决方案，下面就是解决方案。

$spacer: (0, 5px, 10px, 15px);

@each $size in $spacer {

  .pr-#{$size} {
    padding-right: #{$size};
  }

}