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

如何在我自己的类中解析和重用来自

\u variables.scss

的变量（本例中为

.post body

），这样我就不必向html中添加一长串样式了

这是相关html行的外观：

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

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

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

{{{contents}}

您只需使用SCS中的

@extend

，如下所示：

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

  @extend .box-shadow-lg;
}

---

因此，

.box shadow lg

的样式将粘贴到您的

.post body

类中。

我刚刚自己解决了这个问题。看来我需要导入混音。然后使用这个函数

// ...
@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);
}

---

谢谢你的回复。不幸的是，此尝试不起作用。使用

编译时，未找到目标选择器。

// ...
@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);
}