A cosa servono i preprocessori nello sviluppo?

I preprocessori CSS (Sass, Less, Stylus) estendono le capacità del CSS aggiungendo:

• Variabili: Permettono di memorizzare valori (colori, font) per un uso ripetuto.

  // Variabile in Sass
  $primary-color: #3498db;
  
  body {
    color: $primary-color;
  }
  

• Annidamento: Permette di annidare regole CSS all'interno di altre, riflettendo la struttura HTML.

  // Annidamento in Sass
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
        display: inline-block;
      }
    }
  }
  

• Mixins: Permettono di riutilizzare gruppi di dichiarazioni CSS.

  // Mixin in Sass
  @mixin clearfix {
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }
  
  .container {
    @include clearfix;
  }
  

• Funzioni: Permettono di eseguire calcoli e di elaborare valori.

  // Funzione in Sass
  $grid-columns: 12;
  
  @function grid-width($n) {
    @return ($n / $grid-columns) * 100%;
  }
  
  .col-6 {
    width: grid-width(6);
  }
  

• Importazione: Permette di suddividere il CSS in moduli e di includerli nel file principale.

  // Import in Sass
  @import "variables";
  @import "mixins";
  
  body {
    font-family: $base-font;
  }
  

Questo migliora l'organizzazione del codice, riduce la duplicazione, aumenta la leggibilità e accelera lo sviluppo. Alla fine, il preprocessore compila il codice in CSS normale, comprensibile dai browser.