使用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;
}
谢谢你的建议。