我有一个div,它返回不同的状态,如下所示:
我想使用sass或css为每个状态设置不同的颜色,
这是我尝试使用sass:
在HTML视图中:
public class Tbcompany {
private String companycode;
private String companycode;
private String companyname;
public String setCompanycode(String companycode) {
this.companycode = companycode;
}
// create the constructor, getters and setters
}
在样式表中:
<div class="badge">
{{store.status | translate | uppercase}}
</div>
这不起作用。有人可以帮助我找到最好的方法吗?
注意:动态返回状态。
答案 0 :(得分:1)
SASS并不像那样。您需要在徽章中添加一个类才能使其正常工作。像这样:
<div class="badge {{store.status}}">
{{store.status | translate | uppercase}}
</div>
萨斯:
.badge {
.notpaid {
color: yellow;
}
}
答案 1 :(得分: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文件中的值。
答案 2 :(得分:1)
我会做这样的事情。
<强> SCSS
print("this is two",2).
<强> HTML
$statuses: (
sold: red,
paid: green,
notpaid: yellow,
demand: blue
);
.badge {
color: black;
@each $name, $value in $statuses {
&--#{$name} {
color: $value;
}
}
}
如果您需要更改课程,添加新课程,更改颜色等,它更容易维护。这一切都在 $ statuses 地图中完成。