Sass - Direttive di debug

Descrizione

La direttiva @debug rileva gli errori e visualizza i valori dell'espressione SassScript nel flusso di output degli errori standard.

Esempio

Di seguito è riportato il file del foglio di stile salvato con estensione .scss, che è simile al file css.

debug.scss

$font-sizes: 10px + 20px;
$style: (
   color: #bdc3c7
);

.container {
   @debug $style;
   @debug $font-sizes;
}

Puoi dire a SASS di guardare il file e aggiornare il CSS ogni volta che il file SASS cambia, utilizzando il seguente comando:

sass --watch C:\ruby\lib\sass\debug.scss:debug.css

Quando esegui il comando precedente, creerà automaticamente il file debug.css . Ogni volta che si modifica il file SCSS, il file debug.css verrà aggiornato automaticamente.

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra e ti dà l'errore di debug -

  • Salva il codice sopra indicato in formato debug.scss file.

  • Eseguire la riga di comando sopra menzionata nel prompt dei comandi.