Reputation: 309
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
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
Reputation: 11820
I don't think that you need any calc
there. You can get what you want with:
@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;
}
@screen-lg: 1200px;
@laptop: ~"only screen and (min-width: 768px) and (max-width:" (@screen-lg - 1) ~")";
@media @laptop {
color: red;
}
(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
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