using less mixin inside of media query

Question

is it possible to have different mixin depends on width? how to make it work?

e.g.

.fs (@weight: 300, @size: 2vw, @color: black) {
@size2: @size/10.2; 
font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size2,vw);
color: @color;
}


@media screen and (min-width: 1024px){
.fs (@weight: 300, @size: 10px, @color: black) {

font-family: 'Lato', sans-serif;
font-weight: @weight;
font-size: unit(@size,px)!important;
color: @color;
}
}

Thank You

You seem to be on the right track in terms of writing the mixin but I am not sure why you are overwriting the mixin within media query when you can just call it with a different size property. You can pass unit also as part of the parameter itself and thus avoid the `unit()`. — Harry, Aug 12 '15 at 11:30
When you're planning your Less code within `@media` queries it's important to realize *when* those media queries are actually evaluated and come into effect. See for example http://stackoverflow.com/a/14391323/2712740. So yes, you can have different definitions of a mixin of the same name (you can have those *anywhere*), but your expectations of how it would work are most likely different from how it will work actually. It's hard to be more specific until you specify the actual problem you're trying to solve (instead of asking if the method you think you solve it with is possible or not). — seven-phases-max, Aug 12 '15 at 11:57
I.e. see [XY-Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — seven-phases-max, Aug 12 '15 at 11:58
I want to have px or vw units depend on window width. if window width is less then 1024px > use px units... — luke9999, Aug 12 '15 at 12:10

score 1 · Answer 1 · answered Aug 12 '15 at 12:24

I want to have px or vw units depend on window width. if window width is less then 1024px use px units.

No, overriding a mixin within media query won't actually help you (because such override affects only the same media query block and have no effect on any mixin calls out of it).

The easiest method to achieve what you need is actually to put corresponding @media query into the mixin itself:

// impl.:

.fs(@weight: 300, @size: 2, @color: black) {
    font-family: 'Lato', sans-serif;
    font-weight: @weight;
    color: @color;
    font-size: 1vw / 10.2 * @size;

    // this is obviously to be further abstracted 
    // (for example like in http://lesscss.org/features/#detached-rulesets-feature)
    @media screen and (min-width: 1024px) {
        font-size: 1px * @size;
    }
}

// usage:

div {
    .fs(400, 3);
}

span {
    .fs(700, 5);
}

There're other methods (some may be better than above, but it all depends on how exactly you're going to use that .fs mixin).

Just in case, in the example above I do not take into account that for "if window width is less then 1024px use px units." the media query should actually use `max-width: 1024px`. So I just leave it as it was in the Q. — seven-phases-max, Aug 12 '15 at 12:32

using less mixin inside of media query

1 Answers1