如何在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 test{
  color: purple;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  }

.test{
  @include test();
}