.clearfix is defined in less/mixins.less. Right above its definition is a comment with a link to this article: A new micro clearfix hack The article explains how it all works. UPDATE: Yes, link-only answers are bad. I knew this even at the time that I posted this answer, but I didn’t feel like copying and … Read more
Yes. While Visual Studio 2013 doesn’t come with a LESS compiler built-in (so you’ll need to bring your own), you can either use an external compiler, or install an extension so you can compile your LESS files from within the IDE.
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
To disable the calculation which LESS does automatically when discovering a – between two numeric values but still being able to use variables, you can write one of the following: 1) Only escape the operator that triggers the calculation and use the variable like you normally do @padding: 20px; body { padding: calc(100% ~”-” @padding); … Read more
There is a way to use guards for individual (or multiple) attributes. @debug: true; header { /* guard for attribute */ & when (@debug = true) { background-color: yellow; } /* guard for nested class */ #title when (@debug = true) { background-color: orange; } } /* guard for class */ article when (@debug = … Read more
Overriding variables after importing the original bootstrap.less works great for me: @import “less/bootstrap.less”; @body-bg: red; @text-color: green; @link-color: blue; Compiling the above LESS source outputs properly customized Bootstrap CSS code. Relevant info: http://lesscss.org/features/#variables-feature-lazy-loading
Alternatively, you can use pseudo-elements to do so 🙂 the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup: body { background-image: linear-gradient(180deg, #ccc 50%, #fff 50%); background-repeat: no-repeat; … Read more
The best way to do this is to @import your LESS file with all your variables in it. Here’s the syntax for the @import keyword: // For LESS file includes, @import “lib.less”; // or @import “lib”; // infers the .less extension // and for plain CSS includes which are added but not parsed by LESS … Read more
<div class=”img-rounded”> will give you rounded corners.
WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension. If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks into VS.