在自定义类 Bootstap 4 中使用 Sass 中的边距和填充变量

Question

我想知道如何通过在自定义类中使用 Bootsrap 来获取通用的分隔变量。

我有一个 .box 类，想应用 bootstrap 3 的 pl-4 类。 我不想在 HTML 中添加内联类，但想用 sass 设置它的样式。

我想使用 Bootstap 的分隔变量，而不是在类本身中进行硬编码。因此，如果将来我想更改填充物，我只需要更改sass中的填充物即可。

我有以下定义：

$spacer: 1rem !default;    
$spacers: (
0: 0,
1: ($spacer * .125),      // 2px
2: ($spacer * .25),       // 4px
3: ($spacer * .375),      // 6px
4: ($spacer * .5),        // 8px
5: ($spacer * 0.75),      // 12px
6: ($spacer * 1)          // 16px
)

最好的方法是什么？ 我发现的是这样的：

.box{
@extend .pl-3;
}

但我不喜欢这样。这不是很自我解释 有没有其他/更好的方法来做到这一点？喜欢：

.box{
padding-left: $spacer-3;
}

Answer 1

使用 SCSS 函数map-get()，如此处所述。

.box {
padding-left: map-get($spacers, 3);
}

代码笔

Answer 2

你可以使用一个简单的函数(注意 Sass 列表从索引 1 开始，为什么我们使用 $n +1(

@function space($n){ 
@return nth(0 .125 .25 .375 .5 .75 1, $n + 1) * 1rem;
}

.box{
padding-left: space(3);  // 0.375rem;
}