如何在ionic4的类中调用变量？

Question

是否可以在类中调用 variables.scss 中创建的变量？

我尝试了下面的代码，但不起作用

这是我的 variables.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

你不能从一个类中调用多个样式属性的变量，但是你可以扩展另一个类。

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

.another {
  @extend .test;
}

Working Prototype

更多信息在这里：https://coderwall.com/p/7p7w2a/when-to-use-sass-mixins-extends-and-variables

Answer 2

经过大量研究，我得出的结论是，最好的解决方法是创建一个 mixin

像这样：

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

.test{
  @include test();
}