Less CSS Extension and Media Queries

Question

I have a few Less utility that I used as extends - this is a typical scenario.

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

    &:after {
        clear:both;
    }
}

However, now I use media queries, and the extension does not apply to all these scenarios.

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

The question is that I am doing it wrong, and the extension should work inside the media query or better deal with it.

.clearfix
{
    @clearfix();
}

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

    &:after {
        clear:both;
    }
};

Thanks in advance.

Answer 1

Extend , . : , Extend , , , .

, - :

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


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

CSS:

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


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

, , :

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

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

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

, :

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

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

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

Answer 2

@seven-phase-max extend -, .

, , mixin. , ? , mixin ( ).

import :

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

p4:3 @set(), - , :

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

( ).

mixins, :

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

, mixins, :

.set() {
p4: 3;
}

( - ). :

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

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

CSS :

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