css - 如何解析 bootstrap 变量并在自己的类中重用它们？

如何解析和重用自己类（在本例中为_variables.scss）中来自.post-body的变量，这样我就不必在HTML中添加一长串样式了？

这是相关的html行的样子：

<div class="col px-5 py-4 post-body">{{{ contents }}}</div>

这是我的stylesheet.scss：

@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";

// ...

@import "../../../node_modules/bootstrap/scss/bootstrap";

.post-body {
  background-color: #252526;
  color: #dddddd;
  line-height: 26px;

  // Following are my attempts to reuse $box-shadow-lg from _variables.scss

  box-shadow-lg;          // Invalid syntax
  @include box-shadow-lg; // Complains with undefined mixin.
}

当然，我可以直接添加它们，如下所示：但是，随着修改数量的增加，应用于html的类的列表也会增加，并导致复杂性。

<div class="col px-5 py-4 post-body box-shadow-lg">{{{ contents }}}</div>

最佳答案

您只需要像这样在scss中使用@extend：

.post-body {
  background-color: #252526;
  color: #dddddd;
  line-height: 26px;

  @extend .box-shadow-lg;
}

因此，.box-shadow-lg的样式将粘贴到您的.post-body类中。

关于css - 如何解析 bootstrap 变量并在自己的类中重用它们？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58665040/