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;
}