Nozioni di base su SASS

Articles

Questo articolo spiega le nozioni di base di SASS.

Spiegheremo le funzionalità di base di SASS passo dopo passo e mostreremo come utilizzarle con esempi di codice pratici.

YouTube Video

Nozioni di base su SASS

SASS (Syntactically Awesome Stylesheets) è un linguaggio di fogli di stile che estende il CSS. Utilizzando SASS, puoi beneficiare di funzionalità avanzate non disponibili in CSS, come variabili, annidamento, mixin ed ereditarietà. Questo rende la gestione e il riutilizzo dei fogli di stile molto più facile.

Cos’è SASS?

SASS è un linguaggio che semplifica la scrittura del CSS permettendo uno stile più flessibile e potente. SASS offre anche la sintassi SCSS (Sassy CSS), che è simile alla sintassi CSS standard. Ecco un esempio:.

Esempio SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

Esempio CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Configurare SASS

Come installare

Per utilizzare SASS, installa prima Node.js e poi installa SASS usando il comando seguente:.

1npm install -g sass

Come compilare

Per compilare i file SASS (.scss o .sass) in CSS, usa il comando seguente:.

1sass input.scss output.css

Puoi anche utilizzare l'opzione watch per monitorare le modifiche ai file ed eseguire la compilazione in tempo reale.

Variabili

SASS consente di utilizzare variabili per riutilizzare valori come colori e dimensioni dei caratteri.

Codice di esempio

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Questo codice utilizza variabili SASS per definire colori e font, e le riutilizza all'interno del selettore body per migliorare coerenza e manutenibilità.

Risultato compilato

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Nidificazione

SASS migliora la leggibilità del codice permettendo la nidificazione dei selettori CSS.

Codice di esempio

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

Questo codice utilizza una gerarchia annidata per chiarire visivamente la struttura degli stili.

Risultato compilato

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixin

I mixin permettono di riutilizzare il codice su più selettori.

Codice di esempio

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

Questo codice definisce uno stile border-radius usando @mixin e lo riutilizza in button e .card tramite @include, consentendo una stilizzazione efficiente senza duplicazione.

Risultato compilato

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Ereditarietà (@extend)

L’ereditarietà consente di applicare stili esistenti ad altri selettori.

Codice di esempio

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

Questo codice definisce un selettore placeholder %button-style e utilizza @extend per applicare stili comuni sia a button che a .link-button, favorendo il riutilizzo e la coerenza.

Risultato compilato

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Condizionali e cicli

SASS supporta condizionali e cicli per generare stili in modo dinamico.

Esempio di istruzione condizionale

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Questo codice utilizza la funzione if di SASS per cambiare i colori di sfondo e del testo in base al valore di $theme, consentendo la generazione dinamica degli stili tramite condizioni.

Esempio di ciclo

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Questo codice utilizza un ciclo @for di SASS per generare dinamicamente classi da .column-1 a .column-3.

Risultato compilato

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

Suddivisione e importazione dei file

SASS consente di suddividere i file e riutilizzarli tramite @use o @import.

Struttura dei file

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Risultato compilato

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Riepilogo

Utilizzare SASS semplifica la scrittura del CSS e migliora il riutilizzo e la manutenibilità del codice.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.