如何基于视图返回的动态状态，用Sass/CSS设置不同颜色？

你的问题主要出在Sass代码的语法错误和对编译时/运行时逻辑的混淆上：Sass是预处理器，编译时就会生成CSS，没法直接处理页面运行时的动态状态内容；而且你写的条件判断语法有多处错误（比如括号不闭合、@else if没有对应的@if开头、$status是列表而非单个值，判断逻辑根本不生效）。

下面是针对动态状态徽章的最佳实现方案：

步骤1：修改HTML，动态添加状态类名 #

因为状态是动态返回的，我们需要把状态值转换成合法的CSS类名（去掉空格、转小写），添加到徽章元素上：

<!-- 假设你用的是Angular，这里处理状态名：转小写+空格替换为连字符 -->
<div class="badge badge--{{store.status | translate | lowercase | replace:' ':'-'}}"> 
  {{store.status | translate | uppercase}} 
</div>

这样生成的HTML会是类似：

<div class="badge badge--sold">SOLD</div>
<div class="badge badge--on-demand">ON DEMAND</div>

步骤2：用Sass（或纯CSS）编写状态样式 #

方案A：纯CSS（简单直接） #

/* 徽章基础样式 */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* 各状态专属样式 */
.badge--sold {
  background-color: #dc2626;
  color: #ffffff;
}

.badge--on-demand {
  background-color: #f59e0b;
  color: #ffffff;
}

.badge--not-paid {
  background-color: #fbbf24;
  color: #000000;
}

.badge--overdue {
  background-color: #991b1b;
  color: #ffffff;
}

.badge--paid {
  background-color: #16a34a;
  color: #ffffff;
}

方案B：Sass优化（易于维护） #

用Sass的map和@each循环来批量生成样式，方便后续新增/修改状态：

// 定义状态与对应颜色的映射表
$status-config: (
  sold: (bg: #dc2626, text: #fff),
  on-demand: (bg: #f59e0b, text: #fff),
  not-paid: (bg: #fbbf24, text: #000),
  overdue: (bg: #991b1b, text: #fff),
  paid: (bg: #16a34a, text: #fff)
);

/* 徽章基础样式 */
.badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* 循环生成各状态样式 */
@each $status, $colors in $status-config {
  .badge--#{$status} {
    background-color: map-get($colors, bg);
    color: map-get($colors, text);
  }
}

为什么你的原代码不生效？ #

1. 语法错误：你的Sass代码有多处括号不闭合、@else if没有对应的@if开头，编译时就会报错；
2. 逻辑错误：$status: sold, paid, notpaid, on demand是一个列表变量，你直接用$status == sold判断，永远不会成立；
3. 编译时vs运行时：Sass在编译阶段就会生成静态CSS，无法感知页面运行时动态渲染的状态文本，必须通过动态类名来关联样式。

内容的提问来源于stack exchange，提问作者Hot Zellah