根据某些值生成 SCSS mixins？

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;
}

有没有办法把它写成一个循环之类的东西，以便更容易生成这些 mixin？

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};
  }

}

Answer 2

Sass中不允许动态生成mixins，但CSS类可以动态创建。

参考 - Read this thread

---

方法一

在第一种方法中，我使用"key": value 对来定义一个 Sass 映射，从中我们可以轻松地将您喜欢提及的名称和值设置为类名及其属性值。

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

$paddings: (
 "pr0": 0,
 "pr1": $spacing-extra-small,
 "pr2": $spacing-small,
 "pr3": $spacing-medium,
 "pr4": $spacing-large,
 "pr5": $spacing-extra-large
);

@each $padding, $value in $paddings {
 .#{$padding} {
   padding-right: #{$value};
 }
}

注意 - 除了我在$padding 地图中添加的变量，您可以直接应用绝对像素值，如下所示。

$paddings: (
 "pr0": 0,
 "pr1": 0.25rem,
 "pr2": 0.5rem,
 "pr3": 1rem,
 "pr4": 2rem,
 "pr5": 4rem
);

---

方法二

在第二种方法中，我只使用了values 来定义一个Sass 映射，它的类名是使用映射value 的index 动态生成的。

不像JavaScriptarray对象，地图的初始Index是从数字1开始的。所以我通过从地图value的当前索引中减去1值来执行计算并匹配到您上面提到的各个 mixin 名称。

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

$paddings: ( 0, $spacing-extra-small, $spacing-small, $spacing-medium, $spacing-large, $spacing-extra-large );

@each $padding in $paddings {
 .pr#{index(($paddings), ($padding)) - 1} {
    padding-right: #{$padding};
 }
}

---

方法3

在这里，我通过减少到 1 个mixin 和 5 个变量来简化它。这个mixin 可以包含在任何带有首选填充变量的css 类中。

HTML

<div class="box">
  set a padding value here
</div>

SCSS

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

$pr0 : 0px;
$pr1 : $spacing-extra-small;
$pr2 : $spacing-small;
$pr3 : $spacing-medium;
$pr4 : $spacing-large;
$pr5 : $spacing-extra-large;

@mixin set-padding ($pr){
  @if($pr){
    padding-right: $pr;
  }
} 


/*Apply set-padding mixin to .box class*/ 

.box {
  background-color: #ccc;
  @include set-padding($pr2);
}

---

这三种方法都将有助于解决您的问题。谢谢:)