LESS CSS nesting classes

by

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 :).

More Related Contents:

  1. Why I can see Less instead of CSS in a browser [closed]
  2. Margin on child element moves parent element
  3. How to prevent Less from trying to compile CSS calc() properties?
  4. Disable LESS-CSS Overwriting calc() [duplicate]
  5. Is there a SASS.js? Something like LESS.js?
  6. Using variables in property names in LESS (dynamic properties / property name interpolation)
  7. How to thematize in lesscss
  8. less.js not working in chrome
  9. Double border with different color [duplicate]
  10. import .css file into .less file
  11. What does an “&” before a pseudo element in CSS mean?
  12. Defining Variable Variables using LESS CSS
  13. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  14. Build list of selectors with LESS
  15. Less lists as a mixin argument(s)
  16. LESS CSS: abusing the & Operator when nesting?
  17. How to add different CSS style to every nth element, depending on n using LESS
  18. How do I extend a class/mixin which has dynamically formed selector
  19. LESS: Unrecognized input error when using Bootstrap
  20. LESS mixin a variable class name
  21. Concatenate strings in Less
  22. Does LESS have an “extend” feature?
  23. Less CSS: Mixins with Variable Number of Arguments
  24. Media Query grouping instead of multiple scattered media queries that match
  25. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  26. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  27. Is there a CSS hack to affect Safari only NOT Chrome?
  28. Setting height: 100% on my label element doesn’t work
  29. Twitter Bootstrap – add top space between rows
  30. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]

Leave a Comment