I have this less and I can't figure out how to do the math inside the string
@bp-tablet-landscape: 1024px;
@bp-tablet-portrait : 768px;
@tablet-landscape-only: ~"only screen and
(min-width:@{bp-tablet-portrait} + 1) and (max-width: @{bp-tablet-landscape})";
Usage
div#header {
@media @tablet-landscape-only {
background: #000;
}
}
But it doesn't quite compile correctly. It doesn't add 768px + 1 as I had hoped. Any ideas? I've tried several different flavors and I can't nail it. I can obviously define a variable outside the string concat, but I'd like to avoid that approach if possible.
winLess online compiler outputs
@media only screen and (min-width:768px + 1) and (max-width: 1024px) {
div#header {
background: #000;
}
}
I want to get 769px
in there instead of 768px + 1
If you separate it out of the string, then do a second interpolation following (note the 2nd ~
), this works:
@tablet-landscape-only: ~"only screen and (min-width: "(@bp-tablet-portrait + 1) ~") and (max-width: @{bp-tablet-landscape})";
To produce this:
@media only screen and (min-width: 769px ) and (max-width: 1024px) {
div#header {
background: #000;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With