CODEWITHSUNDEEP
csslessmedia-queries
Dujard
Dujard

Reputation: 309

Less with calc() function in a string var

I try to do this in LESS @screen-lg : 1200px;

@laptop : ~"only screen and (min-width: 768px) and (max-width: @{calc(screen-lg - 1px)})";

to target until 1199px. But its doesn't like it.

Is it possible to operate with calc() function in a string var ?

Thanks.

Upvotes: 2

Views: 805

Answers (3)

Joseph Yancey
Joseph Yancey

Reputation: 1498

Since Less is parsed at build time, you can just use the built in math features. There is no need for calc. This works just fine:

@screen-lg : 1200px;
@laptopsize: @screen-lg - 1px;

@laptop: ~"only screen and (min-width: 768px) and (max-width: @{laptopsize})";

@media @laptop {
    div{background: black;}
}

Upvotes: 0

seven-phases-max
seven-phases-max

Reputation: 11820

I don't think that you need any calc there. You can get what you want with:

1

@screen-lg: 1200px;
@screen-lg-max: (@screen-lg - 1);

@laptop: ~"only screen and (min-width: 768px) and (max-width: @{screen-lg-max})";

@media @laptop {
    color: red;
}

2

@screen-lg: 1200px;

@laptop: ~"only screen and (min-width: 768px) and (max-width:" (@screen-lg - 1) ~")";

@media @laptop {
    color: red;
}

3

(Less 1.7.0):

@screen-lg: 1200px;

.laptop(@styles) {
    @media screen and (min-width: 768px) and (max-width: (@screen-lg - 1)) {
        @styles();
    }
}

.laptop({
    color: red;
});

All three snippets above result in the following CSS:

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  color: red;
}

Upvotes: 2

Xavier Rubio Jansana
Xavier Rubio Jansana

Reputation: 6583

Media queries must be evaluated at runtime, and less is usually compiled at build time. To do this kind of stuff you'll probably need client side Javascript version http://lesscss.org/#client-side-usage , and recompile less script each time there's a window resize, so probably has no point to do it using less and you'll do it faster (and cleaner) in Javascript.

That being said, if you try this you'll probably have to do it backwards (i.e. wrap your less variable inside a media query). But I'm not sure at all this makes sense.

Upvotes: 0

Related Questions