Regole annidiate in Less CSS

In questa lezione vedremo come organizzare il codice scritto in Less. Affronteremo come primo argomento quello delle regole annidate che costituiscono una delle funzionalità più interessanti.

In Less è possibile strutturare il codice annidando una o più regole all’interno di un’altra regola. Vediamo un primo esempio che permette di capire come questa funzionalità può risultare estremamente utile per organizzare al meglio il codice scritto.

/* file style.less */
@header-text-color: #ffffff;
@primary-text-color: #212121;
@primary-color: #2595f0;

@font-size-default: 16px;
@font-size--medium: 24px;
@font-size--large: 32px;

.wrapper {

  width: 960px;
  
  h1 {
    background-color: @primary-color;
    color: @header-text-color;
    font-size: @font-size--large;
    font-weight: 800;
  }
  p {
    color: @primary-text-color;
  }

  @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {

    width: 100vw; 

    h1 {
      font-size: @font-size--medium;
      font-weight: 600;
    }
  }
}

Nell’esempio in alto abbiamo una regola esterna per la classe wrapper all’interno della quale, invece di inserire una serie di dichiarazioni come facciamo solitamente in CSS, abbiamo aggiunto delle altre regole. Compilando il file style.less otteniamo il risultato mostrato sotto.

/* file style.css */
.wrapper {
  width: 960px;
}
.wrapper h1 {
  background-color: #2595f0;
  color: #ffffff;
  font-size: 32px;
  font-weight: 800;
}
.wrapper p {
  color: #212121;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .wrapper {
    width: 100vw;
  }
  .wrapper h1 {
    font-size: 24px;
    font-weight: 600;
  }
}

Il compilatore genera in automatico delle regole CSS. Il nuovo selettore per le regole presenti all’interno della regola della classe wrapper è ottenuto in modo da identificare tutti gli elementi h1 e i paragrafi contenuti all’interno dell’elemento con classe wrapper. Anche la media-query viene applicata solo all’elemento con classe wrapper e all’intestazione di primo livello in esso contenuta.

Nell’usare delle regole annidate può spesso risultare conveniente far riferimento ai selettori delle regole più esterne. Per questo motivo può tornare utile l’operatore ‘&’ (Parent Selectors operator).

/* file style.less */
.grandparent {
  .parent {
    &:hover {
      color: firebrick;
    }
  }
}

Nell’esempio riportato sopra, l’operatore ‘&’ assume il valore ‘.grandparent .parent’ come possiamo osservare dopo aver eseguito il comando lessc.

/* file style.css */
.grandparent .parent:hover {
  color: firebrick;
}

L’operatore ‘&’ può essere utilizzato in tutti quei casi in cui abbiamo necessità di far riferimento ai selettori più esterni rispetto a una certa regola annidata. Consideriamo l’esempio riportato di seguito.

/* file style.less */
.thumbnail {
  border-radius: 2px solid #122112;
  &--small {
    width: 100px;
    height: $width;
  }

  &--big {
    width: 250px;
    height: $width;
  }
}

Abbiamo impiegato l’operatore ‘&’ per semplificare il codice che definisce la classe base ‘thumbnail’ e delle variazioni di quest’ultima.

/* file style.css */
.thumbnail {
  border-radius: 2px solid #122112;
}
.thumbnail--small {
  width: 100px;
  height: 100px;
}
.thumbnail--big {
  width: 250px;
  height: 250px;
}