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

Question

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

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

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

这是我使用 sass 尝试过的：

在 HTML 视图中：

<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/

Answer 2

SASS 并不是这样工作的。您需要为您的徽章添加一个类才能正常工作。像这样的：

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

萨斯：

.badge {
    .notpaid {
        color: yellow;
    }
}

Answer 3

我会做这样的事情。

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 地图中完成。