css - 在 LESS 中创建多选择器变量

Question

使用 LESS，是否可以创建一个多选择器变量，可以独立扩展变量中的每个选择器？例如，我有以下 LESS:

@icons: .fas, .far, .fal;

@{icons} {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em;
    text-align: center;
    width: 2.5em;

    &.fa-search {
        position: absolute;
        font-size: 1em;
        width: 1em;
        top: 12px;
        padding-left: 9px;
    }

    &.fa-question-circle {
        font-size: 1.1em;
    }
}

这编译为以下内容，显然只将我的嵌套样式应用于列表中的最后一个选择器 .fal

.fas, .far, .fal {
  font-size: 1.33333em;
  line-height: .75em;
  vertical-align: -0.0667em;
  text-align: center;
  width: 2.5em;
}
.fas, .far, .fal.fa-search {
  position: absolute;
  font-size: 1em;
  width: 1em;
  top: 12px;
  padding-left: 9px;
}
.fas, .far, .fal.fa-question-circle {
  font-size: 1.1em;
}

当我真正想要的是独立应用于每个选择器的嵌套样式时，如下所示:

.fas,
.far,
.fal {
  font-size: 1.33333em;
  line-height: .75em;
  vertical-align: -0.0667em;
  text-align: center;
  width: 2.5em;
}
.fas.fa-search,
.far.fa-search,
.fal.fa-search {
  position: absolute;
  font-size: 1em;
  width: 1em;
  top: 12px;
  padding-left: 9px;
}
.fas.fa-question-circle,
.far.fa-question-circle,
.fal.fa-question-circle {
  font-size: 1.1em;
}

感谢您的任何建议。

Answer 1

你应该使用扩展。

http://lesscss.org/features/#extend-feature-extend-all

.fas {
    font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em;
    text-align: center;
    width: 2.5em;

    &.fa-search {
        position: absolute;
        font-size: 1em;
        width: 1em;
        top: 12px;
        padding-left: 9px;
    }

    &.fa-question-circle {
        font-size: 1.1em;
    }
}

.far:extend( .fas all ) {}
.fal:extend( .fas all ) {}