在IONIC 6中设置SAAS变量

Question

我有一个ionic v6应用程序。我已经设置了全局saas变量。saas变量可以很好地处理普通的css元素，但似乎不能处理Ionic变量。

//.scss file
@import "./variables";
#page{
.tube-button {
--background: $red_color;
font-size: $font-size;
}
}
//html
<IonButton className="tube-button">Quick Book</IonButton>

美元red_color在_variables中定义的Saas变量。scss不能在——background下工作，因此我必须对颜色进行硬编码。我注意到这是我想在我的组件中覆盖的所有离子变量。

第二行font-size使用saas变量$font-size

有没有人可以指导我如何实现这一点，而不必为所有离子变量硬编码SAAS变量。

Answer 1

刚刚明白了。这个问题与IONIC无关。这是一种SAAS行为。它忽略带有——的属性。因此，为了在saas中使用CSS变量进行编译，上面的代码应该更改为

--background: #{$red_color};