Question

我如何解析和重用来自我自己的类（在这种情况下为_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>

Answer 1

您只需要在类似的scss中使用@extend：

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

  @extend .box-shadow-lg;
}

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

Answer 2

我只是自己弄清楚了。看来我需要@import mixins。然后使用该功能。

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

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

.post-body {
  background-color: #252526;
  color: #dddddd;
  line-height: 26px;
  @include box-shadow($box-shadow-lg);
}

如何解析引导程序变量并在自己的类中重用它们？

2 个答案: