Как изменить цвет в зависимости от того, что возвращается в виде?

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

Я бы сделал что-то подобное.

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 .

Answer 3

SASS не совсем так работает.Вы должны добавить класс к вашему значку, чтобы он работал правильно.Примерно так:

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

Sass:

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