Sass: regole annidate

In questa e nelle prossime lezioni vedremo alcuni metodi per organizzare al meglio i fogli di stile attraverso gli strumenti forniti da Sass. Grazie infatti alle regole annidate, alla direttiva @import e ai partial, alla direttiva @extend e ai placeholder possiamo strutturare in maniera più efficiente il codice.

Regole annidate

Iniziamo a parlare delle regole annidate che funzionano allo stesso modo di quelle di altri preprocessori. In Sass è infatti possibile organizzare le regole che hanno una certa relazione fra loro annidandole dentro una regola più esterna. In questo modo il codice risulta meglio organizzato. In fase di compilazione verranno generati i blocchi di dichiarazioni opportuni per i diversi selettori. Vediamo quindi un primo esempio.

/* file style.scss */
$header-text-color: #ffffff;
$primary-text-color: #212121;
$primary-color: #f0257a;

$font-size-default: 16px;
$font-size--medium: 20px;
$font-size--large: 28px;

.container {

  width: 960px;

  .content {
    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; 

    .content {
      h1 {
        font-size: $font-size--medium;
        font-weight: 600;
      }
    }
  }
}

Nell’esempio riportato sopra abbiamo creato una regola per la classe container che ha come unica proprietà width. Al suo interno abbiamo poi inserito un altra regola per la classe content in cui sono state a loro volta definite delle altre regole per i paragrafi e le intestazioni di primo livello. Una media-query è stata poi annidata all’interno della classe container nella quale abbiamo anche ridefinito alcune proprietà per la stessa classe container e per alcuni dei suoi elementi discendenti.

Il file CSS generato dal compilatore presenta gli opportuni selettori utilizzando la gerarchia definita nel file con estensione .scss nel quale abbiamo annidato, all’interno di un certo elemento, le regole relative agli elementi discendenti.

/* file style.css */
.container {
  width: 960px;
}

.container .content h1 {
  background-color: #f0257a;
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
}

.container .content p {
  color: #212121;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .container {
    width: 100vw;
  }
  .container .content h1 {
    font-size: 20px;
    font-weight: 600;
  }
}

Quando si usano le regole annidate può essere utile far riferimento ai selettori delle regole più esterne. In questi casi possiamo adoperare l’operatore ‘&’ (Parent selectors operator)

/* file style.scss */
.container {
  .content {
    a {
      color: blanchedalmond;

      &:hover {
        color: bisque;
      }
    }
  }
}

Nell’esempio riportato sopra usiamo l’operatore ‘&’, che fa riferimento al selettore ‘a’, insieme alla pseudo-classe :hover. Il codice CSS risultante è quello mostrato sotto.

/* file style.css */
.container .content a {
  color: blanchedalmond;
}

.container .content a:hover {
  color: bisque;
}

Sempre grazie all’operatore ‘&’ è possibile costruire dei selettori dinamicamente come riportato nell’esempio sottostante.

/* file style.scss */
.btn {
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  padding: 8px 12px;
  border: none;
  font-size: 12px;

  &--red {
    background-color: #f74a34;
    color: #fff;
  }

  &--yellow {
    background-color: #f7e434;
    color: #333;
  }
}

Compilando il frammento di codice appena illustrato otteniamo il seguente risultato.

/* file style.css */
.btn {
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
  padding: 8px 12px;
  border: none;
  font-size: 12px;
}

.btn--red {
  background-color: #f74a34;
  color: #fff;
}

.btn--yellow {
  background-color: #f7e434;
  color: #333;
}