css - 如何根据 View 中返回的内容更改颜色？

Question

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

• 已售出
• 按需
• 未付款
• 逾期
• 付费

我想使用 sass 或 css 为每个状态设置不同的颜色，

这是我使用 sass 尝试过的:

在 HTML View 中:

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

在样式表中:

$status : sold, paid, notpaid, on demand;

@else if($status == sold){
   .badge{
      color: red;
   }
}

@else if ($status == paid){
    .badge{
       color: green;
    }
]
@else if($status == returned{
   .badge{
       color: blue;
   }
]
@else if ($status == notpaid{
   .badge{
      color: yellow;
   }
}
else{
  .badge{
    color : black;
}

这是行不通的。有人可以帮助实现我想要的最佳方式吗？

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

Answer 1

我认为你可以做到这一点。

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

在 SASS 中有:

.badge{
   &.sold{
      background-color: red;
   }
   &.notpaid{
      background-color: green;
   }
   &.paid{
      background-color: blue,
   }
}

无法获取 Sass 文件中的值。

例子: http://jsfiddle.net/0cm19uec/