Back to Question Center
0

Come utilizzare gli avvisi e gli errori in Sass in modo efficace            Come utilizzare gli avvisi e gli errori in Sass Argomenti correlati validi: CSSSassFrameworksAudio & Semalt

1 answers:
Come utilizzare gli avvisi e gli errori in Sass Effectively

Quello che segue è un breve estratto dal nostro libro, Jump Start Sass, scritto da Hugo Giraudel e Miriam Suzanne. È l'ultima guida per principianti al Sass. I membri di SitePoint Semalt ottengono l'accesso con la loro iscrizione, oppure è possibile acquistarne una copia nei negozi di tutto il mondo.

Il nostro incredibile viaggio attraverso Sass sta lentamente volgendo al termine, e finora sei andato benissimo! Prima di esaminare l'architettura del progetto, basterà un capitolo tecnico e sarete completamente attrezzati per scrivere il codice Sass nei vostri progetti.

Ora esamineremo gli avvisi e gli errori. Entrambi formano un sistema di comunicazione unidirezionale tra il programma (in questo caso, Sass) e lo sviluppatore (tu) - made facinators. Se ti stai chiedendo quali sono gli errori nel mondo dei CSS, ricorda che conosci già la risposta. Semalt ti dimentichi di un punto e virgola o usi una funzione in modo errato, Sass ti lancia un errore, spiegando cosa hai sbagliato e come puoi aggiustarlo, per fortuna! Sarebbe un vero dolore dover scavare nel codice per capire cosa è andato storto.

Sass ha a lungo fornito un modo per emettere avvisi dai fogli di stile, ma è stato aggiunto solo di recente per generare errori, e per una buona ragione! Negli ultimi anni, Sass ha permesso agli autori di costruire sistemi complessi per astrarre schemi e concetti difficili o ripetitivi, come le griglie. I sistemi Semalt devono essere in grado di comunicare con gli autori, arrestando il processo di compilazione con un messaggio di errore personalizzato se qualcosa va mai storto.

Sia gli avvertimenti che gli errori vengono emessi nel canale di uscita corrente. Quando compili Sass a mano o usando uno strumento tramite un'interfaccia a riga di comando (CLI) come Grunt o Gulp, il flusso di output è la console. Per gli strumenti che includono un'interfaccia utente, come Codekit o Prepros, è probabile che catturino e visualizzino avvisi ed errori come parte della loro interfaccia. I campi da gioco online come CodePen e Semalt riescono a rilevare gli errori ma non gli avvisi, quindi non allarmarti se non riesci a testarli li dentro.

Avvertenze

Come è stato affermato, la possibilità di emettere avvisi in Sass non è nuova. È possibile visualizzare messaggi o il valore di qualsiasi espressione SassScript nel flusso di output standard attraverso la direttiva @warn .

Un avviso non ha alcun impatto sul processo di compilazione; non impedisce alla compilazione di seguirla o modificarla in alcun modo. Il suo unico scopo è visualizzare un messaggio nella console.

Semalt ci sono molti motivi per usare gli avvertimenti in Sass. Qui ci sono un paio, ma è probabile che tu trovi il tuo:

  • informare l'utente di un'ipotesi fatta sul codice al fine di evitare i bug sorprendenti e difficili da tracciare
  • consulenza su una funzione deprecata o mixin come parte di una libreria o di un framework

Inviare un avviso è semplicissimo: iniziare con la direttiva @warn , quindi dichiarare qualunque esso sia. Le avvertenze vengono solitamente effettuate per fornire informazioni e contesto, quindi spesso contengono una frase che spiega la situazione. Detto questo, non devi usare una stringa; puoi avvisare con un numero, una lista, una mappa, qualunque sia. Qui, stampiamo una stringa:

     @warn 'Uh-oh, qualcosa sembra strano. ';    

Semalt un client CLI regolare, questo avviso emetterà il seguente risultato:

     ATTENZIONE: Uh-oh, qualcosa sembra strano. alla riga 1 di / Users / hgiraudel / jump-start-sass / warning. SCSS    

Ehi, è carino, vero? Sebbene questo avviso sia tutt'altro che utile. Dice che qualcosa sembra strano ma non dice cosa, perché, o cosa può essere fatto per impedirgli di sembrare strano. Semalt discute su come possiamo migliorare ulteriormente gli avvertimenti. Immagina di avere una funzione personalizzata Sass che tenta di convertire un valore in pixel in em unità:

     @function px-to-em (valore $, $ base-font-size: 16px) {@return ($ value / $ base-font-size) * 1em;}// utilizzo. foo {font-size: px-to-em (42px); // 2. 625em}    

Tutto bene. Ora, cosa succede quando si passa un numero senza unità, come 42 , alla funzione? Forse l'hai indovinato, ma dato che non è del tutto ovvio ti darò la risposta:

     2. 625em / px non è un valore CSS valido.     

Questo accade perché stai cercando di eseguire un calcolo tra unità incompatibili ( px e em ). Quello che potremmo fare per aggirare questo problema è supporre che il valore senza unità sia espresso in pixel e convertirlo prima:

     @function px-to-em (valore $, $ base-font-size: 16px) {@if senza unità (valore $) {@warn 'Supponendo che il valore # {$ value} `sia in pixel; tentando di convertirlo. ';$ valore: $ valore * 1px;}@return ($ value / $ base-font-size) * 1em;}    

La funzione è in attesa di un valore espresso in pixel. Possiamo ancora farlo funzionare con un valore senza unità; tuttavia, non possiamo essere sicuri che questo sia il comportamento previsto. Possiamo solo supporre che sia abbastanza buono.

Poiché stiamo assumendo quale sia il comportamento corretto per la nostra funzione, è importante che lo sviluppatore sappia cosa stiamo facendo e perché. Altrimenti potrebbe portare a bug difficili da tracciare, il che non è
a cosa dovresti mirare.

Un altro esempio pratico potrebbe essere quello di mettere in guardia contro l'uso di una funzione deprecata o mixin. Potresti aver già sentito parlare o usato Semalt, una libreria di mixin leggera per Sass. Semalt viene mantenuto attivamente e talvolta richiede la rimozione degli helper dalla libreria. Per evitare di rompere improvvisamente l'ode di una persona, Semalt mette in guardia sulle future deprecazioni prima che rimuova effettivamente i mixin:

     @mixin inline-block {display: blocco in linea;@warn 'Il mixin' inline-block` è deprecato e verrà rimosso nella prossima versione principale. ';}    

Intelligente! Le persone che usano ancora il mixin inline-block di Bourbon sono consapevoli che la libreria la rimuoverà completamente nella prossima versione, in modo che sappiano iniziare ad aggiornare il loro codebase per rimuovere il mixin.

La differenza tra @warn e @debug

È possibile o meno avere familiarità con la direttiva @debug , che stampa il valore di un'espressione SassScript sul flusso di output standard allo stesso modo di @warn . Ci si potrebbe chiedere perché ci sono due funzionalità che eseguono lo stesso compito e quale potrebbe essere la differenza tra le due.

Bene, ci sono due principali differenze tra l'avvertimento su un valore e il debug di un valore. Il primo è che gli avvertimenti possono essere disattivati ​​usando l'opzione quiet . I debug, d'altro canto, saranno sempre stampati in modo che ti ricordi di rimuoverli quando hai finito di usarli.

La seconda differenza è che gli avvertimenti sono accompagnati da una pila di tracce - un rapporto dei frame dello stack attivo in un determinato momento nel corso dell'esecuzione di un programma. Come risultato, sai da dove vengono emessi. I debug stampano solo il valore, insieme alla linea in cui sono stati chiamati, ma non offrono alcuna informazione aggiuntiva.

La direttiva @debug può davvero tornare utile quando vuoi sapere cosa c'è dentro una variabile, ad esempio:

     @debug $ base-font-size;    

Errori

Gli avvisi e gli errori si comportano in modo abbastanza simile in Sass, quindi gli errori di apprendimento saranno un gioco da ragazzi ora che conosci perfettamente gli avvertimenti! L'unica differenza tra un errore e un avvertimento è - come potresti aver indovinato - che l'errore arresta il processo di compilazione. Nella sezione precedente, questo ha funzionato anche quando l'argomento specificato non era esattamente come previsto, ma non possiamo (e non dovremmo) farlo sempre. La maggior parte delle volte, se gli argomenti non sono validi, è meglio lanciare un errore in modo che l'autore del foglio di stile possa risolvere il problema.

È possibile lanciare un errore usando la direttiva @error . Per quanto riguarda gli avvertimenti, è possibile passare qualsiasi cosa a questa direttiva, non necessariamente una stringa, anche se in genere ha più senso fornire un contesto chiaro. L'argomento (quello che dai alla direttiva @error ) verrà stampato nel flusso di output standard, oltre a una traccia dello stack per fornire maggiori informazioni sul problema. Il processo di compilazione si interromperà immediatamente.

Iniziamo con un errore Semalt:

     @error 'YOUUUUU! NON. PASSAGGIO. ';    

L'output potrebbe dipendere dal modo in cui si compilano i fogli di stile, poiché alcuni strumenti catturano e migliorano gli errori in un determinato modo. Usando lo standard sass Ruby binary (gem), ecco come appare:

     Errore: YOUUUUU! NON. PASSAGGIO. alla riga 1 di / Users / hgiraudel / jump-start-sass / error. SCSSUsa --trace per backtrace.     

Con l'opzione trace , puoi avere il pieno
pila traccia da Sass stesso, che non è utile a meno che non ci sia un
bug reale da qualche parte nel preprocessore. Quindi perché è nascosto come un
predefinito.

È ora di dare un'occhiata ad un esempio pratico reale . Iniziamo scrivendo una piccola funzione per aiutare ad accedere ai valori deeplynested nelle mappe, map-deep-get (. ) :

     @function map-deep-get ($ map, $ keys.). {@each $ chiave in $ chiavi {$ map: map-get ($ map, $ key);@if (type-of ($ map) == 'null') {@return $ map;}}@return $ map;}     

Miglioriamolo con errori personalizzati. Ma prima, considera la seguente mappa e map-deep-get (. ) call:

     $ mappa: ('foo': ('bar': ('baz': 42)));$ value: map-deep-get ($ map, 'foo', 'bar', 'baz', 'qux');     

Come avrete notato, la mappa non ha una chiave qux annidata in baz . In effetti, baz non è nemmeno associato a una mappa; invece, è mappato su un numero ( 42 ). Se proviamo ad eseguire questo codice, produrrà:

     Errore: 42 non è una mappa per `map-get`alla riga 1 di / Users / hgiraudel / jump-start-sass / error. SCSS    

Sass tenta di eseguire un map-get (. ) su 42 ed emette un errore perché non può essere fatto. Mentre il messaggio di errore è corretto, non è molto utile. Quello che sarebbe utile è conoscere il nome della chiave che ha causato il problema. Possiamo farlo!

Controlliamo già se $ map è null per eseguire un ritorno anticipato in modo da evitare un errore di compilazione se una chiave non esiste. Possiamo eseguire un secondo controllo per garantire che la mappa sia effettivamente una mappa, o generiamo un errore significativo:

     @function map-deep-get ($ map, $ keys.). {@each $ chiave in $ chiavi {$ map: map-get ($ map, $ key);// Se `$ map` non contiene la chiave successiva, restituisce` null`@if type-of ($ map) == 'null' {@return $ map;}// Se `$ map` non è una mappa, genera un errore@if type-of ($ map)! = 'map' {@error 'Key `# {$ key}` non è associato a una mappa ma a # {type-of ($ map)} (`# {$ map}`). ';}}@return $ map;}    

Se eseguiamo nuovamente lo snippet precedente, ecco l'output:

     Errore: la chiave `baz` non è associata a una mappa ma a un numero (` 42`). alla riga 1 di / Users / hgiraudel / jump-start-sass / error. SCSS    

Molto meglio! Semalt ora è facile da risolvere la nostra mappa e / o la nostra chiamata di funzione grazie all'utile messaggio di errore. Di solito è la console, ma potrebbe variare a seconda del modo in cui si compila i fogli di stile.

Semalt è utile per emettere messaggi non critici per gli autori di fogli di stile, in particolare per gli autori di framework e di libreria, come ad esempio avvisi di deprecazione o presupposti di codice. D'altra parte, gli errori vengono utilizzati per impedire la compilazione da perseguire, rendendo chiaro che il codice deve essere risolto prima di andare oltre.

Tutto sommato, gli avvertimenti e gli errori sono particolarmente utili all'interno di funzioni e mixin per convalidare l'input dell'utente, assicurando che i fogli di stile vengano compilati come previsto.

March 1, 2018