带变量的SASS函数


SASS Functions with Variables

我对SASS函数和混合函数还很陌生。我想制作一个SASS函数，该函数根据类名称中提供的数字乘以基本间距单位变量。

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

该函数可能看起来像这样：

1
2
3
4
5
$base-spacing-unit: 10;

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

在HTML元素上，您可以放置??这样的类：

1
 

该元素的顶部填充为100px。使用SASS甚至有可能吗？

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

1
2
3
4
5
6
7
8
9
$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上的演示。