如何在LESS中将多个类名传递给mixin

Question

我正在创建一个显示帐户交易的视图，并且要对交易类型/状态进行颜色编码。 我还想显示一个说明颜色代码的图例。

我想要这样的最终结果：

HTML

<table id="transactions">
  <thead>
    <tr>
      <th colspan="2">
        Transactions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="credit">
      <td>A credit</td>
      <td>$1.00</td>
    </tr>
    <tr class="debit paid">
      <td>A paid debit</td>
      <td>($2.00)</td>
    </tr>
    <tr class="debit unpaid">
      <td>An unpaid debit</td>
      <td>($3.00)</td>
    </tr>
  </tbody>
</table>
<hr/>
<table id="legend">
  <thead>
    <tr>
      <th colspan="3">
        Legend
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="credit">Credit</td>
      <td class="debit paid">Paid</td>
      <td class="debit unpaid">Unpaid</td>
    </tr>
  </tbody>
</table>

CSS

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

table#legend > tbody > tr > td.credit {
  color: limegreen;
}

table#transactions > tbody > tr.debit.paid {
  color: goldenrod;
}

table#legend > tbody > tr > td.debit.paid {
  color: goldenrod;
}

table#transactions > tbody > tr.debit.unpaid {
  color: crimson;
}

table#legend > tbody > tr > td.debit.unpaid {
  color: crimson;
}

_{（CodePen）}

请注意，“借方”使用两个类名，以区别于贷方。

显然那里有一些冗余，我试图将其重构为这个（无效的）LESS代码：

.transaction-status(@class, @color) {
  table#transactions > tbody > tr@{class} {
    color: @color;
  }

  table#legend > tbody > tr > td@{class} {
    color: @color;
  }  
}

.transaction-status(.credit, limegreen);
.transaction-status(.debit.paid, goldenrod);
.transaction-status(.debit.unpaid, crimson);

一个可能的解决方法是重新调整事情，以便不同的事务类型具有单个唯一的类名，但是感觉就像时间在移动到IE6一样。 即我知道，但想避免这种有效的LESS，它看起来如此之近，但到目前为止：

.transaction-status(@class, @color) {
  table#transactions > tbody > tr.@{class} {
    color: @color;
  }

  table#legend > tbody > tr > td.@{class} {
    color: @color;
  }  
}

.transaction-status(credit, limegreen);
.transaction-status(debit-paid, goldenrod);
.transaction-status(debit-unpaid, crimson);

我尝试用引号引用类名，但是即使可以编译第一个LESS示例，引号也会传递到输出CSS。 因此，是否有一种方法可以将除“标识符”以外的其他内容作为参数传递给LESS mixin，并使其在选择器插值中正常工作？

Answer 1

选项1：

如您所述，一种选择是在引号内传递值。 但是，这样做之后，您需要确保在使用它们执行选择器插值之前将其删除。 这可以通过使用~()或e()内置函数来完成。 它们都将从输入值中删除引号。 一旦完成，其值不带引号的临时变量可用于选择器插值，如下所示：

.transaction-status(@class, @color) {
    @className: ~"@{class}";
    table#transactions > tbody > tr@{className} {
        color: @color;
    }

    table#legend > tbody > tr > td@{className} {
        color: @color;
    }  
}

.transaction-status(".credit", limegreen);
.transaction-status(".debit.paid", goldenrod);
.transaction-status(".debit.unpaid", crimson);

---

选项2 ：（我认为有点过头）

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

.transaction-status(@color, @class...) {
    @className: e(replace("@{class}" , " " , ".", 'g' )); 
    /* arguments: input string, pattern to match, replacement value, regex flags */
    table#transactions > tbody > tr.@{className} {
        color: @color;
    }

    table#legend > tbody > tr > td.@{className} {
        color: @color;
    }   
}

.transaction-status(limegreen, credit);
.transaction-status(goldenrod, debit, paid);
.transaction-status(crimson, debit, unpaid);

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

Answer 2

看起来无论哪种情况，您都可以为整行着色？ 如果是这样，选择器的简单嵌套将减少重复，并且可以说更易于阅读：

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>

这是使用此方法的示例的分支：

https://codepen.io/anon/pen/mxMLPG

使用此方法的另一个优点是，您还可以在Less文件中将这些样式作为mixins应用。 例如，如果您需要在代码的其他部分中使用相同的颜色值，则可以更抽象地定义颜色，并以不同的方式应用它们：

.status {
  .success {
    color: limegreen;
  }

  .confirmed {
    color: goldenrod;
  }

  .warning {
    color: crimson;
  }
}

.negative-balance {
  .status.warning;
}

#rewards-points {
  .status.success;
}

---

还值得注意的是，在确实需要将规则/混合输入传递到其他混合输入的情况下，Less 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;
});