Question

I would like to target specific elements within a class using less.

In this case, I would like to target elements of class button, but within that I would like to target an anchor tag a.

Currently I have:

.button {
    /* lots of bits and pieces go here, hence 
    the need to keep it at a class level
    */


    /* further down, but still in .button */
    /* Attempt 1 - fails: compiled = a .button (note the space)
    a& {
         height:20px;
    }

    /* Attempt 2 - fails: compiled = .buttona
    &a {
        height:20px;
    }
}

I basically want it to compile to:

a.button

This is so I can create elements such as:

<a class="button">
<button class="button">

But slightly alter it when its an anchor. I don’t want to throw in the it's a bug in less! card too early, but if I use &.another-class it works as expected (compiled: .button.another-class, but not when targeting elements

Answer 1

You’re using an old version of less. The code below generates the correct CSS using less 1.3.3

.button {
 a& {
    height:20px;
  }
}

generates:

a.button {
  height: 20px;
}