variable.scss 从数据库中获取动态值 - Ionic 5答案

【问题标题】：variable.scss fetch dynamic value from database - Ionic 5variable.scss 从数据库中获取动态值 - Ionic 5
【发布时间】：2020-12-22 08:53:27
【问题描述】：

在variable.scss中，我声明了一个变量--prm-clr: #004c3f;，可以看下面的代码：

:root {
   --color-white: #fff;
   --prm-clr :  #004c3f;

我想从变量中获取颜色的值。我该怎么做？该变量将从数据库中获取值。

【问题讨论】：

SASS 基本上是一种宏语言。它编译成静态 CSS。您可以这样做的唯一方法是通过 HTTP 请求从您的服务器加载样式表。您的服务器必须从数据库中检索值，合成有效的 .scss 或 .sass 源文本，调用 SASS 编译器，并返回生成的 CSS。
你找到答案了吗？如果是，请帮忙。

标签： angular ionic-framework sass node-sass

【解决方案1】：

您可以遍历某个 html 元素并更改 css 属性，如下所示：

在您的 .html 文件中定义一个属性：

<ion-col  *ngFor="let item of dataBaseItems">
    <ion-card  [attr.item_status]="item.status"> 
        ... you card content ...
    </ion-card>
<ion-col>

您可以在 .scss 文件中声明地图：

  $item_status_list: (
    1: var(--prm-clr),
    2: var(--sec-clr),
    3: var(--thr-clr),
  );

然后您遍历 ion-col，将 css 相应地应用于您的数据库项目状态，用于与状态变量匹配的每张卡片。

ion-col {
  @each $item_status, $value in map-remove($item_status_list) {
    ion-card[item_status="#{$item_status}"] {
      background-color: $value;
    }
  }
}

有关 scss 和使用规则的更多详细信息，您可以在此处联系：

https://sass-lang.com/documentation/syntax#scss

https://sass-lang.com/documentation/at-rules/control/each

https://sass-lang.com/documentation/modules/map

【讨论】：