Actually, the Less language comes with an embedded function called fade. You pass a color object and the absolute opacity % (higher value means less transparent): fade(@color, 50%); // Return @color with 50% opacity in rgba
It does work indeed. Issue was with my less compiler. It was compiled in to: .container { min-height: calc(-51vh); } Fixed with the following code in less file: .container { min-height: calc(~”100vh – 150px”); } Thanks to this link: Less Aggressive Compilation with CSS3 calc
The site documentation gives the answer: background: fade(@blue, 20%); The function name is fade not alpha according to that document.
You can force a file to be interpreted as a particular type by specifying an option, e.g.: @import (css) “lib”; will output @import “lib”; and @import (less) “lib.css”; will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.
My solution is similar jstam’s, but I avoid making changes to the source files when possible. Given that the changes to bootstrap will be frequent, I want to be able to pull down the latest source and make minimal changes by keeping my modifications in separate files. Of course, it’s not completely bullet proof. Copy … Read more
Less no longer evaluates expression inside calc by default since v3.00. Original answer (Less v1.x…2.x): Do this: body { width: calc(~”100% – 250px – 1.5em”); } In Less 1.4.0 we will have a strictMaths option which requires all Less calculations to be within brackets, so the calc will work “out-of-the-box”. This is an option since … Read more
Using an escaped string (a.k.a. escaped value): width: ~”calc(100% – 200px)”; Also, in case you need to mix Less math with escaped strings: width: calc(~”100% – 15rem +” (10px+5px) ~”+ 2em”); Compiles to: width: calc(100% – 15rem + 15px + 2em); This works as Less concatenates values (the escaped strings and math result) with a … Read more