CODEWITHSUNDEEP
csslessampersand
last-child
last-child

Reputation: 4871

Nested ampersands in SimpLESS

I'm compiling my LESS with SimpLESS but running in to what I think is a bug with how the & combinator is used. Here's the markup: 

<div class="parent">
  <div class="child-1 child-2">
    Hello
  </div>
</div>

And the basic LESS code:

.child-1 {
  color: red;
    .parent & {
    color: yellow;
    &.child-2 {
      color: blue;
    }
  }
}

Expected CSS output:

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

Actual output from SimpLESS:

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1 .child-2 { // extra space between .child-1 and .child-2
  color: blue;
}

As you can see, it's the difference between "Hello" being yellow or blue. Which is the correct LESS compilation? Why would SimpLESS get this wrong?

Upvotes: 0

Views: 171

Answers (1)

Polygnome
Polygnome

Reputation: 7820

The correct output is

.child-1 {
  color: red;
}
.parent .child-1 {
  color: yellow;
}
.parent .child-1.child-2 {
  color: blue;
}

So you are right with what you expect. You can double check if you visit http://less2css.org/, it is the site linked under "Try it now" on http://lesscss.org/.

So you have probably found a bug in the SimpLESS parser.

Upvotes: 1

Related Questions