具有变量的SASS功能

Question

我对SASS功能和mixins相当新。我想创建一个SASS函数，它根据类名中提供的数字乘以基本间距单位变量。

它会像这样工作。假设您有一个名为$ base-spacing-unit的变量，其值为10.如果您将类“.pad-top-b5”放在HTML元素上，它将为它提供$ base-spacing-unit的顶部填充x 5.

该功能可能如下所示：

$base-spacing-unit: 10;

@function pad-top-b($val) {
    padding-top: ($base-spacing-unit * $val);
}

在HTML元素上你可以放一个这样的类：

<div class="pad-top-b10"></div>

该元素的顶部填充为100px。这对SASS来说是否可能？

Answer 1

您可以使用生成一组类的@for循环：

$class-slug: pad-top-b;
$base-spacing-unit: 10;
$classes-amount: 10;

@for $i from 1 through $classes-amount {
  .#{$class-slug}#{$i} {
    padding-top: ($base-spacing-unit * $i);
  }
}

SassMeister上的

Demo。