Preprocessori CSS Confrossi Sass vs. MENO
Ci sono un certo numero di CSS Preprocessor, LESS, Sass, Stylus e Swith CSS, solo per citarne alcuni. Preprocessore CSS, come abbiamo detto spesso, è principalmente inteso a rendere i CSS di authoring più dinamici, organizzati e produttivi. Ma, la domanda è, quale di loro fa meglio il lavoro?
Beh, certo, non daremmo un'occhiata a ognuno di essi, ma confronteremo solo due tra quelli più popolari: Sass e MENO. Per decidere, confronteremo i due in sette fattori: quello che ha un rendimento migliore ottiene un punto; in caso di parità, entrambi riceveranno un punto.
Cominciamo.
Installazione
Iniziamo con il passaggio fondamentale, Installazione. Sia Sass che LESS sono costruiti su piattaforme diverse, Sass è in esecuzione su Ruby mentre LESS è una libreria JavaScript (che è era in realtà anche costruito su Ruby All'inizio).
Sass: Sass ha bisogno di Ruby per funzionare, in Mac questo è stato preinstallato, ma in Windows probabilmente è necessario installarlo prima di poter iniziare a giocare con Sass. Inoltre, Sass deve essere installato tramite il terminale o il prompt dei comandi. Esistono diverse applicazioni GUI che è possibile utilizzare ma non sono gratuite.
DI MENO: LESS è costruito su JavaScript, quindi l'installazione di LESS è facile come collegare la libreria JavaScript al documento HTML. Ci sono anche alcune applicazioni GUI per aiutare nella compilazione di LESS in CSS e molti di questi sono gratuiti e funzionano molto bene (ad esempio WinLess e LESS.app).
Conclusione: MENO è chiaramente in testa.
estensioni
Sia Sass che LESS hanno estensioni per uno sviluppo web più veloce e facile.
insolenza: Nel nostro ultimo post, avevamo discusso su Compass, l'attuale e popolare estensione basata su Sass. Compass ha un numero di Mixins per scrivere la sintassi CSS3 in meno tempo.
Ma Compass va oltre i Mixin CSS3, ha aggiunto altre funzionalità molto utili come Helpers, Layout, Typography, Grid Layout e persino Sprite Images. Ha anche config.rb file in cui possiamo controllare l'output CSS e alcune altre preferenze. Quindi, in breve, Compass è un pacchetto all-in-one per lo sviluppo web con Sass.
DI MENO: LESS ha anche diverse estensioni, ma a differenza di Compass che ha tutto ciò che ci serve in un posto, sono separate e ognuna di esse è costruita da diversi sviluppatori. Questo non sarà un problema per gli utenti esperti, ma per coloro che sono appena agli inizi con LESS, hanno bisogno di prendersi del tempo per scegliere le estensioni giuste che si adattano al loro flusso di lavoro.
Ecco alcune estensioni LESS che potresti dover includere nel tuo progetto:
- CSS3 Mixins: MENO Elementi, Preboot, MENO Mixin.
- Griglia: 960.gs, Frameless, Semantic.gs
- disposizione: Anche meno
- Varie: Twitter Bootstrap
Conclusione: Penso che dobbiamo concordare che Sass e Compass sono un grande duo e la funzione Sprite image è davvero kickass, quindi un punto per Sass qui.
Le lingue
Ogni preprocessore CSS ha una propria lingua e sono per lo più comuni. Ad esempio, sia Sass che LESS hanno variabili, ma non vi è alcuna differenza significativa, ad eccezione di Sass che definisce le variabili con a $ firmare mentre MENO lo fa con un @ cartello. Fanno ancora la stessa cosa: memorizzare un valore costante.
Di seguito, esamineremo alcune delle lingue più comunemente utilizzate sia in Sass che in LESS (in base alla mia esperienza).
annidamento
La regola di annidamento è una buona pratica per evitare di scrivere selettori ripetutamente e sia Sass che LESS hanno la stessa modalità nelle regole di nidificazione;
Sass / Scss e LESS
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; ul padding: 0; margine: 0;
Ma Sass / Scss porta questo metodo un ulteriore passo permettendo di annidare anche singole proprietà, ecco un esempio:
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; ul padding: 0; margine: 0; border: style: solid; a sinistra: larghezza: 4 px; colore: # 333333; right: width: 2px; colore: # 000000;
Questo codice genererà il seguente output.
nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; border-style: solido; border-left-width: 4px; border-left-colour: # 333333; border-right-width: 2px; border-right-color: # 000000; nav ul padding: 0; margine: 0;
Conclusione: Annidare le singole proprietà è una bella aggiunta ed è considerata la migliore pratica, soprattutto se seguiamo il principio ASCIUTTO (non ripeterlo). Quindi, penso che sia chiaro quale si sta facendo meglio in questo caso.
Mixin e ereditarietà del selettore
I mix in Sass e LESS sono definiti in modo leggermente diverso. In Sass usiamo il@mixin direttiva mentre in LESS lo definiamo con selettore di classe. Ecco un esempio:
Sass / SCS
@mixin border-radius ($ values) border-radius: $ valori; nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; @include border-radius (10px);
DI MENO
.border (@radius) border-radius: @radius; nav margin: 50px auto 0; larghezza: 788 px; altezza: 45 px; .border (10px);
Mixin, in Sass e LESS, è usato per includere proprietà da un set di regole ad un altro set di regole. In Sass, questo metodo è ulteriormente sviluppato con Ereditarietà del selettore. Il concetto è identico, ma invece di copiare l'intera proprietà, Sass estenderà o raggruppa selettori che hanno le stesse proprietà e valori usando il @estendere direttiva.
Dai un'occhiata a questo esempio qui sotto:
.circle border: 1px solid #ccc; border-radius: 50px; overflow: nascosto; .avatar @extend .circle;
Questo codice risulterà come;
.circle, .avatar border: 1px solid #ccc; border-radius: 50px; overflow: nascosto;
Conclusione: Sass è un passo avanti di distinti mixin e ereditarietà dei selettori.
operazioni
Sia Sass che LESS possono eseguire operazioni matematiche di base, ma a volte restituiscono risultati diversi. Guarda come eseguono questo calcolo casuale:
Sass / SCS
$ margin: 10px; div margin: $ margin - 10%; / * Errore di sintassi: unità incompatibili: '%' e 'px' * /
DI MENO
@margin: 10px; div margin: @margin - 10%; / * = 0px * /
Conclusione: Sass, in questo caso, lo sta facendo in modo più preciso; dato che% e px non sono equivalenti, dovrebbe restituire un errore. Anche se, spero davvero che possa essere qualcosa del genere 10px - 10% = 9px.
Notifiche di errore
La notifica degli errori è importante per vedere cosa stiamo facendo male. Immagina migliaia di righe di codice e un minimo errore nel caos. Un chiaro notifica di errore sarà il modo migliore per capire rapidamente il problema.
insolenza: In questo esempio, sto solo utilizzando il prompt dei comandi per eseguire il compilatore. Sass genererà una notifica di errore ogni volta che nel codice c'è una nullità. In questo caso rimuoveremo un punto e virgola alla riga 6 e questo dovrebbe trasformarsi in un errore. Dai uno sguardo allo screenshot qui sotto.
Quando ho visto per la prima volta questa notifica, difficilmente riuscivo a capirlo. Inoltre, sembra che Sass sia leggermente fuori da dove si trova l'errore. Ha detto che l'errore è attivo linea 7, invece di 6.
DI MENO: Con lo stesso scenario di errore, la notifica LESS è più ben presentata e sembra anche più accurata. Dai un'occhiata a questo screenshot:
Conclusione: MENO offre una migliore esperienza in materia e vince a mani basse.
Documentazione
La documentazione è una parte molto cruciale per ogni prodotto; anche gli sviluppatori più esperti avrebbero difficoltà a fare le cose senza Documentazione.
insolenza: Se diamo un'occhiata alla documentazione sul sito ufficiale, personalmente, mi sento come se fossi nel mezzo di una biblioteca, la documentazione è molto completa. Tuttavia, l'aspetto e il tatto, se questo è importante per te, non sono motivanti per la lettura, in più lo sfondo è semplicemente bianco.
La presentazione è molto più simile alla documentazione W3 o WikiPedia. Non so se questo è lo standard di visualizzazione della documentazione in Internet, ma non è l'unico modo.
DI MENO: D'altra parte, la documentazione di LESS è più chiara senza troppe spiegazioni di testo e si tuffa direttamente negli esempi. Ha anche una buona tipografia e una migliore combinazione di colori. Penso che questo sia il motivo per cui LESS ha attirato la mia attenzione in primo luogo e posso imparare più velocemente a causa del layout e della presentazione della documentazione.
Conclusione: La presentazione della documentazione di LESS è migliore, sebbene Sass abbia una documentazione più completa, quindi penso che possiamo definirlo un pareggio.
Pensiero finale
Penso che sia una conclusione chiara Sass è meglio con un punteggio totale di 5 contro 3 per meno. Tuttavia, ciò non significa che MENO sia cattivo; devono solo essere migliori Alla fine, spetta comunque alla decisione dell'utente finale scegliere il preprocessore di loro scelta. Che sia Sass o MENO, purché siano confortevoli e più produttivi, questo è il vincitore nella loro lista.
Infine, se hai qualcosa in mente su questo argomento, sentiti libero di condividerlo nella casella dei commenti qui sotto.
