как вызвать переменную внутри класса в ionic4?

Question

можно ли вызывать переменную, созданную в variables.scss внутри класса?

я пробовал приведенный ниже код и не работает

это мои переменные .scss:

$test : (
  color: purple,
  font-style: normal,
  font-weight: normal,
  font-size: 13px
  );

и это мой html (ionic4)

<ion-label class="test">Just testing!</ion-label>
<h1 class="test">Testing again</h1>

Как я могу решить эту проблему?

Answer 1

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

, например:

@mixin test{
  color: purple;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  }

.test{
  @include test();
}

Answer 2

Вы не можете вызвать переменную нескольких атрибутов стиля из класса, но вы можете расширить другой класс.

.test {
  color: purple;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
}

.another {
  @extend .test;
}

Рабочий прототип

Подробнее здесь: https://coderwall.com/p/7p7w2a/when-to-use-sass-mixins-extends-and-variables