Html 如何在更少的时间内将多个类名传递给mixin

我正在创建一个显示帐户上交易的视图，我想对交易类型/状态进行颜色编码。我还想展示一个图例来解释颜色代码

我想要的最终结果是这样的：

.trans-status {
  &.credit {
    color: limegreen;
  }

  &.debit.paid {
    color: goldenrod;
  }

  &.debit.unpaid {
    color: crimson;
  }
}

HTML 交易 信用证 $1.00 已付款的借方 $2.00 未付的借方 $3.00 传奇 信用 支付 不付报酬的 CSS tabletransactions>tbody>tr.credit{ 颜色：柠檬黄； } tablelegend>tbody>tr>td.credit{ 颜色：柠檬黄； } tabletransactions>tbody>tr.debit.paid{ 颜色：黄花； } tablelegend>tbody>tr>td.debit.paid{ 颜色：黄花； } tabletransactions>tbody>tr.debit.unpaid{ 颜色：深红色； } tablelegend>tbody>tr>td.debit.unpaid{ 颜色：深红色； } 请注意，借项使用两个类名来区分它们与贷项

很明显，这里有一点冗余，我试图将其重构成无效的代码：

.交易-status@class，@颜色{ tabletransactions>tbody>tr@{class}{ 颜色：@颜色； } tablegend>tbody>tr>td@{class}{ 颜色：@颜色； } } .transaction-status.credit，limegreen； .transaction-status.debit.paid，goldenrod； .transaction-status.debit.unpaid，深红色； 一个可能的解决方法是重新编排事务，使不同的事务类型有一个唯一的类名，但这感觉就像时间旅行到IE6时代。也就是说，我知道，但希望避免这种有效性较低的情况，这似乎非常接近，但迄今为止：

.交易-status@class，@颜色{ tabletransactions>tbody>tr.@{class}{ 颜色：@颜色； } tablegend>tbody>tr>td.@{class}{ 颜色：@颜色； } } .交易状态信用，limegreen； .交易状态借记支付，goldenrod； .交易状态借方未付，深红色； 我尝试引用类名，但即使这样可以减少第一个示例的编译，引号也会传递到输出CSS。那么，有没有办法将标识符以外的东西作为参数传递给较少的混音器，并使其在选择器插值中正确工作？

选项1：

正如您所提到的，一个选项是在引号内传递值。但完成后，您需要确保在使用它们执行选择器插值之前删除它们。这可以通过使用~或内置函数来完成。它们都将从输入值中去掉引号。完成此操作后，其值没有引号的临时变量可用于选择器插值，如下所示：

.交易-status@class，@颜色{ @类名：~@{class}； tabletransactions>tbody>tr@{className}{ 颜色：@颜色； } tablegend>tbody>tr>td@{className}{ 颜色：@颜色； } } .transaction-status.credit，limegreen； .transaction-status.debit.paid，goldenrod； .transaction-status.debit.unpaid，深红色； 选择2：在我看来有点迂回

你也可以使用。。。根据需要传入尽可能多的类的选项请注意，这需要对输入的传递顺序稍作更改，然后将其转换为字符串，并使用replace函数添加。。需要replace函数，因为转换后的字符串的格式为class1 class2空格分隔符

.交易-status@color，@class。。。{ @类名：ereplace@{class}，，，，'g'； /*参数：输入字符串、要匹配的模式、替换值、正则表达式标志*/ tabletransactions>tbody>tr.@{className}{ 颜色：@颜色； } tablegend>tbody>tr>td.@{className}{ 颜色：@颜色； } } .交易状态limegreen、credit； .交易状态：黄花、借记、已付； .交易状态深红色、借方、未付；

---

注意：选项2仅适用于较少的v.1.7.0及更高版本，因为替换功能仅在v1.7.0中引入。

在这两种情况下，您似乎都可以为整行着色？如果是这样，选择器的简单嵌套将减少重复，并且可以说更易于阅读：

table#transactions, table#legend {
    & > tbody > tr {
      &.credit {
        color: limegreen;
      }

      &.debit.paid {
        color: goldenrod;
      }

      &.debit.unpaid {
        color: crimson;
      }
    }
  }
}

但这并不能让您在代码的其他部分轻松地重用这些类/颜色组合，这可能是您非常想做的事情。我将更像这样定义您的颜色类：

.trans-status {
  &.credit {
    color: limegreen;
  }

  &.debit.paid {
    color: goldenrod;
  }

  &.debit.unpaid {
    color: crimson;
  }
}

然后可以更精确地应用适当的类：

<tr>
  <td>An unpaid debit</td>
  <td class="trans-status debit unpaid">($3.00)</td>
</tr>

还值得注意的是，在需要将规则/混合传递到其他混合的情况下，1.7.0及以上版本支持使用比字符串插值更干净的语法来完成同样的事情。最初的问题并不能保证达到这样的复杂程度，但它对断点之类的事情很有用：

.break(@min-width; @max-width; @rules) {
  @media only screen and (min-width:@min-width) 
    and (max-width: @max-width){
    @rules();
  }
}

.break(0px, 480px, {
  font-size: 10px;
  padding: 8px;
});

---

你为什么不能用那只放在墙上的呢。是在选择器中，而不是在参数中？仅针对此特定cas

---

e也可以使用技巧，尽管这种方法有其缺点，而且并不总是很好闻。顺便说一句，我总是想知道为什么每个人都喜欢tablelegend>tbody>tr>td.debit.unpaid而不是table.debit.unpaid你没有其他表格的单元格颜色是相反的，是吗？@seven phases max:我实际上认为附加的父选择器方法也很好。@seven phases max可能只是我戴着眼罩。我还有其他一些可重复使用的OOCSS样式的表格样式需要如此精确，所以这种方法在我的脑子里被烧掉了。谢谢你的两个建议，我没有意识到这样做。我想我是在寻找~方法，我尝试过使用它，但不断收到错误，并且认为语法可能已经被弃用了。谢谢