Why is less inserting a space between class name and pseudo selector?

Question

I trying to add a :hover pseudo selector using Less. But every time I try It adds a space between the class name and the pseudo selector.

I was wondering if anyone knows how to fix this issue. Any help would be really appreciated!

Below is my code

Less Code

.well{
  display: inline-block;
  text-decoration: none;
  color: #000;
  :hover{
    color: #000;
  }
}

Generated CSS code

.well :hover {
  color: #000;
}

Answer 1

Use &:hover:

.well{
  display: inline-block;
  text-decoration: none;
  color: #000;

  &:hover{
    color: #000;
  }
}

The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector

from http://lesscss.org/features/#parent-selectors-feature

Answer 2

Less adds a space because when you nest a selector under another, the nested selector is considered as a child or descendant (unless explicitly stated otherwise). In CSS, any selector of a descendant element is separated from the parent by a space and so the space is added.

The fix is to append the child to the parent selector &. This tells the Less compiler that the nested selector is actually not a child/descendant's selector but is actually an attachment to the parent.

.well{
  display: inline-block;
  text-decoration: none;
  color: #000;
  &:hover{
    color: #000;
  }
}