Less extend in media query not workling

Question

my less extend is not working and i dont know why here are some snippets from my files!

Here from the global.less:

// Global Modifier
.is--rounded { .border-radius(); }

.is--block { display: block !important; }
.is--inline { display: inline !important; }
.is--inline-block { display: inline-block !important; }
.is--hidden { display: none !important; }
.is--invisible { visibility: hidden !important; }

And this from the header.less works

.header-gray {
    .shop--navigation {
        &:extend(.is--hidden);
    }
}

this from the same header.less but didn't work

@media screen and (min-width: 480px) {
    .header-gray {
        .shop--navigation {
            &:extend(.is--block);
        }
    }
}

Is there a syntax error ? or wheres the problem?

See http://stackoverflow.com/questions/30375305/less-css-extend-and-media-queries. — seven-phases-max, Jul 06 '15 at 13:19

score 0 · Answer 1 · answered Jul 06 '15 at 12:21

0

From LESS documentation: "Extend written inside a media declaration should match only selectors inside the same media declaration"

Because your second example is wrapped in a media query, the .is--block declaration needs to match

answered Jul 06 '15 at 12:21

James King

1,897
11
16

Do I have to put all the classes like .is--block in every viewport ? – Artij Jul 06 '15 at 12:34
@Artij For this use-case it's more efficient to use mixins instead of extend. Extending "one property classes" does no actually give any benefits (especially if it's applied to a long selector name ruleset). – seven-phases-max Jul 06 '15 at 13:31
well, thanks for the help guys – Artij Jul 06 '15 at 14:55

Less extend in media query not workling

1 Answers1