Problems with less mix-ins

Question

I'm trying to do (I think) a really simple mixin in LESS, and I'm not sure what's going wrong here.

I'm compiling with Visual Studio Web Essentials.

So here's my goal: I want a style that is just like the boostrap control-label, except I want to change some property (let's say padding):

Here's my LESS:

@import (reference) 'bootstrap/bootstrap.less';
    .my-test-class {
      .control-label;
      padding: 4;
    }

This results in a compile error: NameError: .control-label is undefined.

What am I doing wrong here?

Answer 1

As far as I can tell, all the .control-label class definitions reside within other class definitions in this file. Specifically, inside either .form-inline and .form-horizontal. However within .form-inline it is also inside a media query, which at present prevents it from being accessed as a mixin.

So that means you must access it via the only namespace available, like so:

@import (reference) 'bootstrap/bootstrap.less';

.my-test-class {
  .form-horizontal > .control-label;
  padding: 4;
}

The general principle to learn from this is one really needs to be aware of what the bootstrap code actually outputs to be able to access (or know whether you can even access) a piece of it as a mixin (whether importing it as (reference) or not).