Css 如何根据视图中返回的内容更改颜色？

我有一个div，它返回不同的状态，如下所示：

• 出售
• 随需应变
• 未付
• 逾期
• 支付

我希望使用sass或css为每个状态使用不同的颜色

这就是我使用sass所尝试的：

在HTML视图中：

<div class="badge">
    {{store.status | translate | uppercase}}
</div>

这是行不通的。有人能帮我找到实现我想要的最好的方法吗

---

注意：状态是动态返回的。

SASS不是这样工作的。您需要在徽章中添加一个类才能正常工作。大概是这样的：

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

---

SASS不是那样工作的。您需要在徽章中添加一个类才能正常工作。大概是这样的：

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

---

我认为你可以做到这一点

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

无法在Sass文件中获取该值

例如：

---

我认为你可以做到这一点

<div class="badge {{store.status}}">
    {{store.status | translate | uppercase}}
</div>

无法在Sass文件中获取该值

例如：

---

我会这样做

SCSS

$statuses: (
  sold: red,
  paid: green,
  notpaid: yellow,
  demand: blue
);

.badge {
  color: black;

  @each $name, $value in $statuses {
    &--#{$name} {
      color: $value;
    }
  }
}

HTML

<div class="badge"></div><!--black-->
<div class="badge badge--sold"></div><!--red-->
<div class="badge badge--paid"></div><!--green-->
<div class="badge badge--notpaid"></div><!--yellow-->
<div class="badge badge--demand"></div><!--blue-->

<div class="badge badge--{{store.status | translate | lowercase}}"></div>

---

如果您需要更改类、添加新类、更改颜色等，那么维护起来就容易多了。这一切都在$statuses地图中完成

我会这样做

SCSS

$statuses: (
  sold: red,
  paid: green,
  notpaid: yellow,
  demand: blue
);

.badge {
  color: black;

  @each $name, $value in $statuses {
    &--#{$name} {
      color: $value;
    }
  }
}

HTML

<div class="badge"></div><!--black-->
<div class="badge badge--sold"></div><!--red-->
<div class="badge badge--paid"></div><!--green-->
<div class="badge badge--notpaid"></div><!--yellow-->
<div class="badge badge--demand"></div><!--blue-->

<div class="badge badge--{{store.status | translate | lowercase}}"></div>

---

如果您需要更改类、添加新类、更改颜色等，那么维护起来就容易多了。这一切都在$statuses地图中完成

请仔细阅读我的问题，我有一个类在一个表中返回不同的状态列表，例如在一个表中，你有一辆状态为已售出的汽车假设你有不同状态的manny汽车，已付款、未付款、已售出、损坏等，所以我希望每个状态包含不同的颜色，希望你得到我，thanksMy示例将返回的状态作为badge div的类重复，然后您可以在SASS中引用它。您正试图在样式表中使用某种类型的动态if语句，这不是CSS的工作方式。您的权利，但您的方法仍然不起作用：（请仔细阅读我的问题，我有一个类在一个表中返回不同的状态列表，例如在一个表中，你有一辆状态为已售出的汽车假设你有状态不同的manny汽车，已付款、未付款、已售出、损坏等，所以我希望每个状态包含不同的颜色希望你得到我，谢谢我的示例将重复返回的状态s作为badge div的一个类，您可以在您的SASS中引用它。您试图在样式表中使用某种类型的动态if语句，这不是CSS的工作方式。您的权利，但您的方法仍然不起作用：（请记住，这些数据不是静态的，而是在视图中动态返回的，现在我放了一个例子…我忘记了Sass中的$。请记住，这些数据不是静态的，是在视图中动态返回的，现在我放了一个例子…我忘记了Sass中的$。hii@gavin记住，这是一个循环，只有一个类nmed{store.status}}该部门在类似表的列中返回不同的状态，例如u有car1 car2 car3和echa有不同的状态已售出、已付款、未付款等。我需要的是每个返回状态必须有自己的颜色。例如car1状态（已售出）颜色为绿色，car2状态（未付款）红色等等。@HotZellah这很酷。我的答案与公认的答案相似。hii@gavin记得这是一个循环，只有一个类nmed{store.status}}这个div retun在一个类似于表的列中有不同的状态，例如u have car1 car2 car3和echa有不同的状态sall、paid、not paid等。我需要的是每个返回状态都必须有自己的颜色。例如car1 status（sall）颜色为绿色，car2 status（notpaid）颜色为红色等@HotZellah这很酷。我的答案与公认的答案类似。