CODEWITHSUNDEEP
cssless
o_O
o_O

Reputation: 5737

Getting styles outside a media query with Less extend?

It took me awhile to figure out why this wasn't working:

@md: ~"only screen and (min-width: 48.9375em)";
.col-2 { width: 50%; }
.block1, .block2 {
    @media @md {
      &:extend(.col-2, .pull-left);
    }
}

I researched and found out why this doesn't work. Less :extend() ignores it since they're not in the same media query. So how do I recreate the following in Less?

.col-2 { width: 50%; }
@media only screen and (min-width: 48.9375em) {
    .block1, .block2 {
        width: 50%;
    }
}

Edit: I realize for this example it would be faster just to add that single style within .block1, .block2 but I have many examples of similar instances where I need the styles of a class outside a media query inside the media query of another element. So figuring out the best way to do this solves the issue.

Upvotes: 0

Views: 302

Answers (1)

Harry
Harry

Reputation: 89750

As you have correctly found out, it is currently not possible to extend the properties of a block that is outside the media query in a selector block that is within media query. I suspect the reason for this is that in simple terms all that the :extend does is to group selectors which cannot be done here. If the .col-2 is grouped within the media query, it creates a wrong behavior (and) a media query can't be added as a comma separated value in a selector group.

You can just call the required classes within the media query like in the below snippet.

Less Code:

@md: ~"only screen and (min-width: 48.9375em)";
.col-2 { width: 50%; }
.pull-left { float: left; }
.block1, .block2 {
  @media @md {
    .col-2;
    .pull-left;
  }
}

Output CSS:

.col-2 {
  width: 50%;
}
.pull-left {
  float: left;
}
@media only screen and (min-width: 48.9375em) {
  .block1,
  .block2 {
    width: 50%;
    float: left;
  }
}

Upvotes: 1

Related Questions