Как я могу разрешить переменные начальной загрузки и повторно использовать их в моих собственных классах?

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

Я просто понял это сам. Кажется, мне нужно @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);
}

Answer 2

Вам просто нужно использовать @extend из scss следующим образом:

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

  @extend .box-shadow-lg;
}

Таким образом, стили .box-shadow-lg будут вставлены в ваш .post-body класс.