CODEWITHSUNDEEP
cssless
noclist
noclist

Reputation: 1819

Create multi-selector variable in LESS

Using LESS, is it possible to create a multi-selector variable that can extend each selector in the variable independently? For example, I have the following 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;
    }
}

This compiles to the following, obviously only applying my nested styles to .fal, the last selector in my list

.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;
}

When what I really want is the nested styles to apply to each selector independently, like so: 

.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;
}

Thanks for any suggestions.

Upvotes: 0

Views: 39

Answers (1)

bitstarr
bitstarr

Reputation: 374

You should make use of extend.

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

Upvotes: 1

Related Questions