Oggi metteremo testa a testa due preprocessori CSS. Hai senza dubbio visto molte discussioni su come SCSS si confronta con LESS, ma dove si posiziona Stylus, il nuovo capretto sul blocco? È possibile che corrisponda alla potenza e alla versatilità di SASS?
Salteremo la testa dapprima in entrambe le sintassi e le confronteremo fianco a fianco per vedere quale è più logico e versatile. Parleremo anche di funzionalità e ti forniremo una chiara argomentazione sul motivo per cui un preprocessore è più potente. Puoi stare tranquillo, non ti daremo alla fine e ti daremo una cacca per un pareggio, ci sarà un vincitore!
Sass, non SCSS
Un piccolo dettaglio deve essere affrontato prima di immergerci ulteriormente in questo. La sintassi che useremo oggi è Sass, non SCSS. Quest'ultimo è il modulo più recente, quindi è probabilmente quello con cui hai più familiarità.
Tuttavia, per fare un paragone, Sass è in realtà molto più vicino a Stylus rispetto al suo fratello SCSS. Mentre SCSS è stato un tentativo di reinterpretare Sass e rendere la sintassi più fedele ai CSS, Stylus segue le modalità del linguaggio Sass originale nel suo abbandono della maggior parte della sintassi strutturale, come il punto e virgola e le parentesi graffe.
Ahimè, questo non è un articolo sul merito di Sass vs SCSS, anche se così mi asterrò dall'incertezza su questo argomento. Se stai cercando una buona discussione su questo argomento, controlla? Sass vs. SCSS: Qual è la sintassi migliore? da The Sass Way. In generale, tieni presente che Sass e SCSS sono in gran parte le stesse funzionalità, l'unica differenza è come li scrivi.
Sintassi di base
Iniziamo con un confronto diretto di entrambe le sintassi al loro livello più elementare. Scriveremo la stessa dichiarazione in entrambe le lingue e vedremo dove si trovano le differenze.
Come puoi vedere, sono quasi identici. Né la sintassi richiede parentesi graffe o punti e virgola, il che significa ovviamente che entrambi sono abbastanza dipendenti da spazi bianchi per una corretta compilazione. La grande differenza che vediamo a questo punto è con i due punti: Sass li richiede, Stylus no.
Flessibilità
Una cosa che ho sempre apprezzato di LESS e SCSS è che posso ancora scrivere semplici vecchi CSS vanilla all'interno del mio foglio di stile. Queste sintassi sono così vicine ai CSS che puoi scegliere e scegliere i punti chiave per implementare le loro caratteristiche speciali, ma non devi davvero riqualificare il tuo cervello per scrivere CSS.
Per quanto posso dire, Sass non ha questa capacità, ma sembra che lo stilo faccia (dimostrato qui). Comunque, io uso CodeKit per compilare il mio Stylus, che non mi permette di mixare puro CSS con Sass o Stylus. Se lancio una semplice linea di puro CSS in entrambi, il codice non verrà compilato (entrambe le lingue hanno rapporti di errore).
Detto questo, c'è un po 'di flessibilità con Stylus e Codekit che non troverete in Sass. Ad esempio, Stylus non richiede l'uso di due punti o punti e virgola, ma consente di utilizzarli entrambi. Semplicemente non gli piacciono le parentesi graffe. Sass, d'altra parte, richiede due punti e non verrà compilato se si utilizza il punto e virgola.
Vincitore sintassi di base: Stylus
Se hai intenzione di utilizzare una sintassi del preprocessore ridotta, Stilo è il migliore dei due a mio parere. La semplice risposta è che Stylus ti permette di scegliere il tuo livello di verbosità mentre Sass ti costringe in un metodo set.
In tutta onestà, la vera ragione per cui sto dichiarando che Stylus è il vincitore qui potrebbe farti considerare il perdente. La sintassi flessibile è una parolaccia con molti codificatori perché può portare a una codifica incoerente e incoerente. Se stai per usare Stylus, dovresti scegliere un metodo di dichiarazione e attenerci ad esso. Non scrivere due righe di codice che utilizzano solo punti e virgola, quindi passa a lanciare in due punti, quindi passa nuovamente a non utilizzare nessuno dei due punti.
annidamento
L'annidamento consente di salvare alcuni codici ripetitivi annidando i selettori l'uno dentro l'altro. Quindi quando a? P? il selettore è nidificato in un? div? selettore, il risultato della compilazione sarà entrambi? div? e? div p ?. Questa funzionalità è quasi identica in Stylus e Sass.
Sass in realtà prende il concetto di nidificazione di un ulteriore passo e ti consente di risparmiare la fatica di digitare nomi di proprietà ripetitivi. Ad esempio, considera l'esempio di seguito. In Stylus, devi ripetere il carattere? parte, ma Sass consente l'annidamento come metodo alternativo.
Vincitore: Sass
Il semplice fatto qui è che Sass ha una caratteristica interessante che Stylus non possiede. Non l'ho mai usato e non sono sicuro che inizierò ora, ma posso vedere come sarebbe utile, specialmente in casi come allineamento del testo, ombreggiatura del testo, decorazione del testo, ecc. Dove non esiste alcuna alternativa stenografica .
variabili
Uno dei più grandi progetti per i preprocessori è l'inclusione di variabili. Molti sviluppatori della vecchia scuola pensano che le variabili non abbiano nulla da fare in prossimità dei CSS, ma innumerevoli altri pensano che le variabili siano una delle più belle possibilità di colpire mai i CSS. Personalmente trovo che le variabili CSS siano immensamente utili.
Sia Stylus che Sass includono il supporto variabile. Ecco come appare ogni volta che si utilizza una variabile per dichiarare la dimensione del carattere su un paragrafo.
Ancora una volta vediamo che la sintassi di Stylus era un po 'più succinta. Si noti come Sass richiede l'uso di un carattere extra (il simbolo del dollaro) per fare riferimento alle variabili. Stylus prende anche la direzione di utilizzare un simbolo di uguaglianza invece di un due punti, che dovrebbe essere familiare agli sviluppatori JavaScript.
Entrambi i linguaggi consentono anche operazioni variabili, quindi puoi aggiungere, sottrarre, moltiplicare e dividere le variabili in base al contenuto del tuo cuore.
Vincitore: Draw (preferisco la sintassi di Sass)
Facciamolo capire, se totalizziamo tutto puramente sulla verbosità, Stylus continuerà a vincere. È la sintassi più breve, punto. Ma l'ipotesi che il più breve sia migliore non è sempre corretta.
È interessante notare che, a livello personale, penso che preferisco il modo Sass qui. La sintassi del colon giusta si sente più come i CSS. Inoltre, le persone non sono abituate a vedere le variabili nei loro CSS che i segni del dollaro li aiutano davvero a risaltare. Posso facilmente scansionare centinaia di righe di Sass e individuare le variabili, un compito che è molto più difficile con Stylus.
Ricerca di proprietà
Mentre siamo sul tema delle variabili, vale la pena menzionare che Stylus ha una ricerca di proprietà unica? funzionalità che ti consente di risparmiare alcune delle variabili che normalmente dovresti utilizzare con Sass. Ad esempio, supponiamo di voler impostare il padding su un elemento a metà del suo margine. Con Sass, devi usare le variabili per realizzare questo (per quanto posso dire), ma con Stylus puoi usare il? @? sintassi per fare riferimento al valore di un'altra proprietà all'interno dello stesso blocco di dichiarazione.
Vincitore: Stilo
Sass non ha nemmeno un equivalente alla funzione di ricerca proprietà, quindi questo non è un concorso. Personalmente mi piace davvero avere questa capacità e spero che la gente di Sass pensi di aggiungerla.
Mixin e funzioni
Quindi, daremo un'occhiata ai mixin. Sono tipi di variabili simili per grandi blocchi di codice anziché una singola proprietà o valore. Le mixine sono forse uno degli strumenti più potenti che i preprocessori CSS hanno per risparmiare tempo ed energie. Sapere come sfruttare correttamente i mixin renderà il tuo lavoro molto più semplice!
Ecco un esempio della sintassi di Stilo e Sass in una tipica definizione di raggio di confine. Il vantaggio qui è che devi solo scrivere tutti i prefissi del browser una volta, quindi consentire al preprocessore di operare la sua magia in qualsiasi altro posto in cui li implementa.
Ancora una volta vediamo che Sass richiede una serie di simboli e sintassi extra mentre Stylus mantiene le cose pulite. Si noti inoltre che Stylus ha la possibilità di utilizzare qualcosa chiamato? Mixins trasparenti? dove non hai nemmeno bisogno di usare le parentesi quando chiami il mixin. Sembra che io stia usando la proprietà predefinita border-radius quando in effetti sto utilizzando il mio mixin.
Le funzioni sono un costrutto simile, solo in genere sono pensate per eseguire un'operazione e restituire un valore. Ecco la sintassi della funzione per ogni lingua:
Vincitore: Stilo
Dopo aver scritto il mixin e le funzioni con Stylus, quindi tornare a Sass, quest'ultimo sembrava molto più lavoro. Il modo Stylus è davvero semplice, mentre Sass ti scrive costantemente? @Mixin ?,? @Include ?,? @Function? e? @return ?, che sembra superfluo.
La carne dell'argomento: quale è meglio?
Non sono il primo a fare un confronto diretto di esempi come quello precedente, sebbene abbia fatto intenzionalmente un passo in più rispetto ad altri dichiarando chiaramente la mia preferenza in ciascun caso.
In tutta onestà, sia Sass che Stylus sono troppo grandi per me per continuare su questo percorso di confronto della sintassi. Ci sono molti più casi in cui è possibile trovare che Stylus e Sass sono quasi identici nei loro approcci. Ecco alcune funzionalità che condividono entrambe:
- interpolazione
- Ereditarietà del selettore tramite @extend
- Se e altro condizionali di stile (direttive di controllo)
- Funzioni cromatiche integrate
- Iterazione
- Direttive di importazione
Dovresti avere un'idea di come ogni lingua funziona ora, quindi passiamo ad una discussione pura su dove si differenziano e perché è importante. Una cosa su cui riflettere immediatamente è che Stylus è specificamente progettato per collaborare con Node.js, quindi se sei un fan del Node, questa potrebbe essere la strada da percorrere.
Per la maggior parte, sembra che Stylus sia l'opzione più flessibile e persino più potente. Ci sono alcuni casi in cui Sass tira fuori un trucco che Stylus non può, ma non ho incontrato un? Stylus killer? caratteristica che mi farebbe affermare chiaramente che Sass è il migliore.
Viceversa, sembra che ci siano un sacco di piccole cose che si trovano quando si scava in Stylus che ti manca quando torni a Sass. Ne ho già menzionato alcuni come la funzione di ricerca delle proprietà, un'altra interessante è l'argomento? variabile locale automatica per i mixin, che consente di saltare la fase di creazione della propria variabile per duplicare tutti gli argomenti da un mixin. C'è anche la funzione param di resto che consuma gli argomenti rimanenti passati a un mixin o funzione (questa funzione potrebbe essere in Sass, ma non l'ho trovata):
Infine, Stylus ha anche un sacco di problemi con le query sui media, che sono un po 'ingombranti e imbarazzanti con tutte quelle parentesi. Ecco una query sui supporti di stampa Stylus:
Che dire di SCSS?
Il mio preelaboratore preferito di tutti i giorni è Sass con la sintassi SCSS. Fino a quando non ho scritto questo articolo, non avevo sperimentato molto con nessuna delle sintassi ridotte perché ho trovato un po 'spaventoso buttare via tutte le regole che avevo così radicato nel mio cervello.
Inoltre, mi piace l'idea di qualcosa che si collega semplicemente al mio attuale flusso di lavoro CSS piuttosto che provare a cambiarlo completamente da zero. Detto questo, mi sono adattato rapidamente al modo in cui Stylus faceva le cose e non mi dispiace tanto quanto pensavo di farlo. È carino abbandonare quei due punti!
Diciamo però che non ci si può proprio abituare o pensare che sia una cattiva pratica usare una sintassi spogliata perché ti farà dimenticare come scrivere CSS corretto, in questo caso SCSS è la strada giusta? Forse no.Finché utilizzi la riga di comando o un compilatore migliore di CodeKit, Stylus ti consente di adottare lo stile? CSS? di sintassi, il che significa che puoi sfruttare tutte le chicche che trovi in Stylus senza accettare il spaventoso metodo minimo di authoring CSS.
Che dire della bussola?
Un tassello assolutamente fondamentale di questo puzzle è Compass, che porta Sass ad un nuovo livello di meraviglia. Ovviamente, se si dipende da questo strumento, passare a Stylus sarà molto più difficile. Tuttavia, esiste un progetto strettamente correlato chiamato Nib che tenta di portare un po 'di bontà CSS3 simile a Stylus.
Conclusione
Mi fa male dirlo, ma Stylus sembra davvero avere il sopravvento in molti aspetti. Ha il vantaggio di imparare e migliorare ciò che è stato fatto con Sass, e ne esce meglio. Detto questo, non ho intenzione di rinunciare a SCSS in qualunque momento presto. Credo nel progetto Sass e sono fiducioso che la sua adozione diffusa continuerà a produrre molti miglioramenti. Non sono sicuro di avere la stessa fiducia in Stylus.
Lascia un commento qui sotto e facci sapere cosa ne pensi. Quale preprocessore pensi sia migliore e perché? Indipendentemente da quale ha più asso nella manica, quale userete a lungo termine?