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

Question

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

我有一个 .box 类，想应用 bootstrap 4 的类 pl-3。我不想在 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;
    }

标签： htmlcsssassbootstrap-4padding

Answer 1

使用此处记录map-get()的SCSS 函数。

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

密码笔