根据变量值设置元素样式

.set-colors(@type) when (@type = error) {
  @base-color: #d9534f;
  background: @base-color;
  color: contrast(@base-color, lighten(@base-color, 25%), darken(@base-color, 25%));
  border: 1px solid contrast(@base-color, lighten(@base-color, 25%), darken(@base-color, 25%));
}
.set-colors(@type) when (@type = info) {
  @base-color: #5bc0de;
  background: @base-color;
  color: contrast(@base-color, lighten(@base-color, 5%), darken(@base-color, 5%));
  border: 1px solid contrast(@base-color, lighten(@base-color, 5%), darken(@base-color, 5%));
}
.set-colors() {
  background: white;
  color: black;
  border: 1px solid black;
}

.error-message {
  .set-colors(error);
}
.info-message {
  .set-colors(info);
}
.default-div {
  .set-colors;
}

在上面的例子中，background，border 和 color 是根据元素的类型分配的。如果元素是默认文本 div，则背景将为白色，而文本和边框将为黑色。如果是错误消息，则显示 div 或 info 消息显示 div，然后根据类型分配颜色。

编译的 CSS 输出如下：

.error-message {
  background: #d9534f;
  color: #f0b9b8;
  border: 1px solid #f0b9b8;
}
.info-message {
  background: #5bc0de;
  color: #46b8da;
  border: 1px solid #46b8da;
}
.default-div {
  background: white;
  color: black;
  border: 1px solid black;
}