0

我有一个返回不同状态的 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;
}

这不起作用。有人可以帮助实现我想要的最佳方式吗?

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

4

3 回答 3

1

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

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

萨斯:

.badge {
    .notpaid {
        color: yellow;
    }
}
于 2018-05-18T23:18:13.373 回答
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/

于 2018-05-19T01:02:53.633 回答
1

我会做这样的事情。

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映射中完成。

于 2018-05-19T03:39:30.053 回答