Abbiamo già affrontato LESS in alcuni script precedenti e abbiamo visto come, di fatto, consenta di produrre file CSS contando sull'aiuto di scripting.

Tre la caratteristiche interessanti di LESS c'è la possibilità di impostare stili annidati con maggior semplicità, che poi saranno esplosi nei classici stili combinati di CSS.

Si prenda ad esempio questo stile di partenza:

#main {
  h1 {
    font: 20px;
    color: #f40000;
  }

  a {
    color: #f0f0f0;
    text-decoration: none;
      &:hover { color: #909090; }
  }
}

Sarà automaticamente espanso in quello che segue, con risparmio di tempo e una maggior chiarezza durante la scrittura:

#main h1 {
  font: 20px;
  color: #f40000;
}

#main a {
  color: #f0f0f0;
  text-decoration: none;
}

#main a:hover {
  color: #909090;
}

Di particolare interesse è l'uso del carattere &, che va utilizzato in corrispondenza delle pseudo-classi, come :hover.

Il risultato è quello di partire da un file più facilmente leggibile e che ricalca la struttura del DOM.
Lo stesso approccio può essere applicato anche alle media queries.