See Mixin Guards and Ruleset Guards (aka “CSS Guards”) for when usage examples. Since you need to define a variable you’ll have to use mixin-based condition (rulesets do not expose their variables to an outer scope). E.g.: .-(); .-() when (@side = right) { @sideOpposite: left; } .-() when (@side = left) { @sideOpposite: right; … Read more
The answer to the question is “Yes, you can create and work with arrays in Less”. An array (in CSS and thus Less realm it’s usually referred to as “List”) is defined with just the same code as in your Q: @badge-colors: blue #7FB3D4, gray #767676, green #8CC079, red #b35d5d; See “List Functions” for functions … Read more
I’d suggest using LESS’s escape function, i.e.: a:link, a:visited { color: green; opacity: .5; font-size: 1em; } a:hover { color: red; opacity: 1; font-size: 2em; .transition(e(“font-size, color”)); } And though it seems that LESS accepts that, it will only animate the last property in the comma-separated string you send through. A pity.
Custom web fonts via CDN (or any cross-domain font request) doesn’t work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers. You can fix this by adding headers to your page. Apache <FilesMatch “.(eot|ttf|otf|woff)”> Header set Access-Control-Allow-Origin “*” </FilesMatch> Nginx if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){ add_header Access-Control-Allow-Origin … Read more
Re Explosion Pills “An installation can run arbitrary scripts and running it with sudo can be extremely dangerous!” Seems like using sudo is the wrong way of doing it. “Change the owner of the files in your /usr/local folder to the current user:” sudo chown -R $USER /usr/local Then run the install node install -g … Read more
New Answer (requires LESS 1.4.0) What you actually desire is something known as extending in LESS and SASS terminology. For example, you want an HTML element (just an example)… <div class=”myclass”></div> …to fully behave as if it had a span3 class from bootstrap added to it, but without actually adding that class in the HTML. … Read more
First, your solution given in the question certainly has some usefulness to it. One thing I thought, however, was that it would be nice to define all the media query variables “near” one another (your solution would have them under each media query call). So I propose the following as an alternative solution. It also … Read more
To avoid the problems mentioned in periklis’s answer: create your own prefixed-bootstrap.less that re-compiles the compiled bootstrap.css in : .bootstrap { @import (less) ‘dist/css/bootstrap.css’; @import (less) ‘dist/css/bootstrap-theme.css’; /* optional */ } No need for sed commands then. The observations mentioned in Lars Nielsen’s answer are of course still valid.
Marvin, I wrote a function that does exactly what you’re looking for, last night. I have created a fork on Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc Take a look at it. Since this is a recent addition, I’d like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the … Read more
See my answer here: Multiple properties are getting treated as separate arguments in mixins Summary: use this mixin for variable number of arguments: .transition (@value1,@value2:X,…) { @value: ~`”@{arguments}”.replace(/[\[\]]|\,\sX/g, ”)`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }