Less CSS Nesting Classes

LESS CSS nesting classes

The & character has the function of a this keyword, actually (a thing I did not know at the moment of writing the answer). It is possible to write:

.class1 {
    &.class2 {}
}

and the CSS that will be generated will look like this:

.class1.class2 {}

For the record, @grobitto was the first to post this piece of information.

---

[ORIGINAL ANSWER]

LESS doesn't work this way.

.class1.class2 {} - defines two classes on the same DOM node, but

.class1 {
    .class2 {}
}

defines nested nodes. .class2 will only be applied if it is a child of a node with the class class1.

I've been confused with this too and my conclusion is that LESS needs a this keyword :).

Nested classes in CSS use other style from less nested style

Simple Answer

Using plain CSS you can't extend a class or use inheritance between classes

-

Possible Solution

You can do that using a CSS pre-processor like Sass, using the @extend keyword.

Code example:

.message {
  padding: .5em;
}

.message-error {
  @extend .message;
}

More info about its usage here

How to nest Less class to inherit parent styles?

You will have to nest pseudo-classes only into main selector. In this case .btn-default.

This is how it should look:

.btn-default {
  /* some code here */

  &:hover, &:focus {
    background-color: rgba(217, 217, 217, 0.65);
    background-clip: content-box;
  }

  &:focus {
    outline: 2px solid #047a9c;
  }
}

The & character has the function of a "this" keyword

From your original question:

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;

  .btn-default:focus {
    outline: 2px solid #047a9c;
  }
}

Less doesn't work this way. Try to pronounce your code. Your code would be like this in CSS:

.btn-default:hover {
  background-color: rgba(217, 217, 217, 0.65);
  background-clip: content-box;
}

.btn-default:hover.btn-default:focus {
    outline: 2px solid #047a9c;
}

You have to nest pseudo-classes and pseudo-elements into main selector (.btn-default)

If you want more selectors, pseudo-elements or pseudo-classes to have same properties, you should use ,, not to nest one inside another.

---

Here are some helpful links:

Less to CSS compiler

LESS CSS nesting classes

Pseudo classes

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

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

LESS: Extend a previously defined nested selector

LESS currently does not support extending a "concatenated name" selectors (basically, .top &-first &-item is interpreted as three distinct selector elements and never found by extend looking for a single selector).

A workaround for your particular case:

.top {
    &-first {
        background: black;
    }

    &-second {
        background: green;
    }

    &-first, &-second {
        &-item {
            color: white;
        }
    }
}

LESS - what is the purpose of & AFTER a nested selector

The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:

• Attach a class to an existing selector
• Change state based on parent classes
• Filter a nested selector to only match certain elements
• Avoid repetition when selecting repeated elements
• Simplify combinatorial explosions

The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:

/**
 * Add a top border to paragraphs,
 * but remove that border when a preceding paragraph already has one.
 */
p  {
    border-top: 1px solid gray;
    & + & {
        border-top: 0;
    }
}

I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.

Can I use css-modules with LESS + nesting?

I am also using less with css modules, but I don't think they way you are using the '&' fits with the goal of css modules. From my understanding 'composes' is more analogous to @import than &, and I only find myself using the & for psuedo-classes.

You can definitely do things the way you have here, but don't you find it a bit strange that you have to specify both the 'common' and 'normal' classes in the HTML? Much better in my opinion to just specify 'normal', and let normal inherit the shared styles using 'compose'.

How to share styling rules between nested classes using LESS?

I think the problem you are getting with the mixin solution is that you are using the mixin within the definition of the mixin.

you need to finish defining the mixin before you use it, like this:

LESS:

.cell {
  background:red;
}

.cell-empty {
  .cell
}

The css output would be:

.cell {
  background: red;
}
.cell-empty {
  background: red;
}

---

Related Topics