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 ) {}

在LESS中创建多选择器变量

1 个答案: