MENU


Nesting

Less can nest selectors and directives like Sass. Unlike Sass, Less cannot nest properties.
Nesting selectors...
#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

#main { width: 97%; } #main p, #main div { font-size: 2em; } #main p a, #main div a { font-weight: bold; } #main pre { font-size: 3em; }
Nesting directives...Directives are bubbled up, with the selectors copied into their bodies.
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}
#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

@media screen { .screen-color { color: green; } } @media screen and (min-width: 768px) { .screen-color { color: red; } } @media tv { .screen-color { color: black; } } #a { color: blue; padding: 2 2 2 2; } @font-face { src: made-up-url; }
In a nested context, the parent selector & can also be used in various ways.
.x {
   &:hover {
      background: red;
   }
   &-button {
      background: green;
   }
   a & {
      background: blue;
   }
}

div, span, main{
   & & {
      background: black;
   } 
}

.x:hover { background: red; } .x-button { background: green; } a .x { background: blue; } div div, div span, div main, span div, span span, span main, main div, main span, main main { background: black; }