Less CSS Extend and media queries

Question

I have a few Less utilities that I've used as extends - here's a typical scenario.

.clearfix
{
    &:before,
    &:after {
        content:"";
        display:table;
    }

    &:after {
        clear:both;
    }
}

However, I now find myself using media queries and the extend doesn't, well, extend, to all these scenarios.

What I would like to do is to declare the code once and reuse it. I came up with this pattern which works and allows me to use the utility inside media queries, or wherever it suits.

The question is I am doing it wrong, and the extend should work inside a media query, or is there a better of tackling this.

.clearfix
{
    @clearfix();
}

@clearfix :
{
    &:before,
    &:after {
        content:"";
        display:table;
    }

    &:after {
        clear:both;
    }
};

Thanks in advance.

Answer 1

Extend inside media queries can extend only styles defined in the same media query block. The reason is obvious: since the extending selector is appended to the list of extended style selectors, extend of the globally defined style by a media query limited selector would mean leaking of that media specific selector to the global scope thus violating the purpose of the media query block.

In other words, if you have something like:

.clearfix {
    /* bla-bla-bla */
}


@media foo {
    .some-div:extend(.clearfix) {
        // some media specific styles
    }
}

And want to get the following CSS:

.clearfix,
.some-div {
    /* bla-bla-bla */
}


@media foo {
    .some-div {
        /* some media specific styles */
    }
}

You'll need to specify your intentions explicitly by moving the extending part to the global scope as well, e.g.:

.clearfix {
    /* bla-bla-bla */
}

.some-div:extend(.clearfix) {}

@media foo {
    .some-div {
        /* some media specific styles */
    }
}

Or alternatively:

.clearfix {
    /* bla-bla-bla */
}

.some-div {
    &:extend(.clearfix);

    @media foo {
        /* some media specific styles */
    }
}

Answer 2

@seven-phases-max does answer your question about the extend in media queries, but does not answer your question about the used solution.

I think that your are using a detached ruleset where you should use a mixin. You could wonder why you should prefer a mixin? I think using a mixin will make your code more reusable (and extendable).

When i import the following code in my project:

@set: {
p1: 0;
p2: 1;
p3: 2;
}

When i want to set p4:3 for every @set() call i need to define due to the last declaration wins rule for variables:

@set: {
p1: 0;
p2: 1;
p3: 2;
p4: 3;
}

The above repeat the first three properties (which possible can change in future).

Doing the same with mixins, from my library:

.set() {
p1: 0;
p2: 1;
p3: 2;
}

In my project which imports the above mixins i will have to define only:

.set() {
p4: 3;
}

But when using media queries, detached ruleset indeed can help you to make your code more DRY (define your media queries once on a single place). Example:

.large-screens(@rules) {
@media (min-width: 1200px)  {
@rules();
}
}

header {
width: 600px;
.large-screens({width: 100%; max-width: 1500px;})
}  

The above compiles into CSS as follows:

header {
  width: 600px;
}
@media (min-width: 1200px) {
  header {
    width: 100%;
    max-width: 1500px;
  }
}