Share
Il mondo dello sviluppo web di front end ha costantemente aumentato la diffusione di ciò che chiamiamo "CSS Preprocessors", che estende la funzionalità dei normali CSS. Probabilmente i due più noti, con la più grande base di utenti, sono LESS e Sass / SCSS. Comunque c'è un terzo preprocessore che non ha ricevuto altrettanta attenzione, e questo è Stylus.
Oggi parleremo del perché Stylus sia fantastico, perché lo scelgo e perché potrebbe diventare il tuo nuovo eroe CSS.
Prima di entrare nello specifico di come funziona Stylus, inizierò con la mia personale interpretazione dei punti di forza predominanti di LESS e Sass / SCSS, e perché non scelgo nessuno dei due, anche se entrambi.
Ciascuno dei tre preprocessori include l'uso di variabili, mixin, nidificazione ed estensione, insieme a vari gradi di operazioni e funzioni logiche. Quindi tutti e tre sono gli stessi, in quanto ti permettono di astrarre elementi chiave di design, usare la logica e scrivere meno codice, il che li rende tutti in grado di darti grandi guadagni rispetto ai CSS grezzi se usati bene.
Tuttavia, essendo tutti e tre uguali in questo senso di base, è il modo in cui sono diversi che alla fine porteranno alla tua scelta su quale usare.
Per me, la forza più grande al di fuori degli aspetti comuni a tutti e tre i preprocessori è la comunità intorno a LESS e le offerte create da loro.
Il progetto più noto che incorpora LESS è il framework Twitter Bootstrap, e la mia ipotesi è che il desiderio di lavorare con esso è una parte importante di ciò che porta molte persone a turno a MENO.
Un altro risalto è la libreria di mixaggio LESShat, che fornisce un'eccellente gamma di mix per gli effetti CSS3 e molto altro, e il suo partner il plugin CSShat per Photoshop, che genera copia e incolla il codice LESS dagli elementi PSD. In particolare questi due elementi in tandem creano un flusso di lavoro molto potente, che è fantastico se fai un sacco di processi di progettazione con Photoshop.
E un altro grande vantaggio di LESS è il fatto che molte persone lo trovano abbastanza accessibile da usare. Puoi usare un semplice file JavaScript per compilarlo al volo, puoi usare un IDE con compilation incorporata come CrunchApp (o CodeKit solo su Mac), oppure puoi usare Node.js sul tuo computer locale per un sistema più robusto / soluzione di compilazione flessibile.
Preferisco sempre il mio codice su framework di terze parti, e in questi giorni tendo anche a fare un minimo di Photoshop design, preferendo progettare dinamicamente nel browser il più possibile. (CSSHat può produrre anche in più lingue). Quindi per me, così come i progetti che ho descritto sono, da soli non sono sufficienti per costringermi a scegliere LESS come mio precursore.
Ma la ragione principale per cui non uso LESS è in realtà il significativo divario tra le funzionalità di elaborazione logica disponibili tra questo e gli altri due principali preprocessori.
Sfortunatamente, meno funzionalità basate sulla logica sono disponibili per l'uso, meno siamo in grado di creare codice minimo e pulito, e lo sviluppo più lento e le successive modifiche saranno.
MENO consente una certa logica, ma è davvero piuttosto limitante rispetto a Stylus e Sass / SCSS. Vedrai perché nella mia descrizione di ciò che è fantastico su Sass.
Sass ha anche una grande community con molti grandi progetti disponibili. Dove LESS ha Twitter Bootstrap, Sass ha framework come Gumby e Foundation. Dove LESS ha LESShat, Sass ha mixin librerie come Compass e Bourbon.
Tuttavia, il punto in cui viene davvero messo a confronto con LESS è la sua potente capacità di gestire la logica. Dove MENO è ciò che potreste chiamare CSS avanzato, Sass si comporta molto più come un linguaggio di programmazione completo.
Ad esempio, Sass consente di creare controlli condizionali scritti in modo efficiente, particolarmente utile nei mix.
In Sass puoi fare quanto segue:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: $ bg_color; @else background-color: transparent;
Questo mixin controlla per vedere se $ border_on è impostato per vero, e se è così usa il $ border_color valore nell'output per confine proprietà. In caso contrario, torna a impostare il confine proprietà a 0.
Quindi controlla anche per vedere se $ bg_on è impostato per vero, e se è così usa il $ BG_COLOR valore nell'output per colore di sfondo proprietà. In caso contrario, imposta il colore di sfondo proprietà a trasparente
Ciò significa che, a seconda dei valori passati, è possibile generare fino a quattro diversi tipi di output da una singola mixina, cioè confine e sfondo sia su, bordo e sfondo sia off, border on e background off, border off e background on.
Tuttavia in LESS non ci sono controlli "if / else", quindi quanto sopra non sarebbe possibile. Il massimo che puoi fare con LESS è usare ciò che viene chiamato "Guardin Mixins", in cui un determinato mixin viene emesso in modo diverso in base a un controllo rispetto a una singola espressione.
Quindi il tuo mixin potrebbe verificare se il @border_on parametro è stato impostato su vero così:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) quando (@border_on = true) border: 1px solid @border_color;
Tuttavia, poiché manca la funzionalità "if / else", non ha la possibilità di controllare successivamente il valore di @bg_on, né dare un valore alternativo per il confine proprietà all'interno della stessa miscela.
Per ottenere la stessa logica che è stata gestita con un singolo mixin di Sass, è necessario creare quattro diversi mixin protetti con LESS, ovvero uno per ciascuna delle possibili combinazioni di @border_on e @bg_on valori, così:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) quando (@border_on = true) e (@bg_on = true) border: 1px solid $ border_color; background-color: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) quando (@border_on = false) e (@bg_on = false) border: 0; colore di sfondo: trasparente; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) quando (@border_on = false) e (@bg_on = true) border: 0; background-color: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) quando (@border_on = true) e (@bg_on = false) border: 1px solid @border_color; colore di sfondo: trasparente;
E questo è solo con due valori da controllare; il numero aumenta con ogni valore su cui si desidera eseguire la logica, che può diventare molto ingombrante in quanto si desidera creare mixaggi più sofisticati. È anche un processo arduo considerare tutte le possibili combinazioni di combinazioni variabili per renderle conto di tutte.
Questo è solo un esempio di dove la logica avanzata rende la vita molto più semplice con Sass vs. LESS, ma ce ne sono molti altri. In particolare, Sass offre anche eccellenti capacità di iterazione attraverso il suo @per, @ogni e @mentre direttive.
E infine, cosa molto importante, mentre LESS ha alcune funzioni integrate, Sass lo rende molto facile da scrivere. Sono semplicemente scritti come:
@ function function-name ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Queste funzioni logiche aprono un mondo di possibilità per cose come la creazione di motori di layout, la gestione di px in em, i modificatori di colore e le scorciatoie per un numero infinito di cose che potresti trovare da un progetto all'altro.
Da tutto ciò che ho letto e sentito parlare di persone, e dalla mia esperienza personale, è questa potenza logica notevolmente migliorata che è il principale motore per le persone che scelgono Sass su MENO.
Con LESS escluso per la maggior parte dei progetti a causa delle sue operazioni logiche limitate, si tratta di una scelta tra Sass e Stylus, entrambi dotati di una vasta gamma di funzioni disponibili.
E tra i due, scelgo Stylus. Stilo ha il potere di Sass, con l'accessibilità di MENO.
Stylus.js fa tutto ciò di cui ho bisogno che Sass fa, ma richiede solo JavaScript o Node.js per compilare. Inoltre, ha un modo particolare di operare che è fluido e facile da lavorare, e ha una bella sintassi pulita che preferisco.
Per me, il requisito per eseguire Ruby on Rails e gestire le gemme è un ostacolo importante per voler lavorare con Sass. Ruby non fa parte di nessuno dei progetti che ho sviluppato, quindi l'unica ragione per cui ho mai avuto a che fare con l'installazione e qualsiasi gemma è esclusivamente per gestire Sass. Questo è un insieme di errori di connessione e problemi di installazione di cui non ho bisogno se posso evitarlo.
Sospetto che molte altre persone si trovino nella stessa barca per non utilizzare altrimenti Ruby, e in particolare per non voler utilizzare un preprocessore CSS.
Inoltre, anche se ho bisogno di installare Ruby per usare Sass, mi trovo ancora a dover lavorare con Node.js e NPM per usare Grunt per gestire altri aspetti dei miei progetti, come ad esempio la ricerca di modifiche, la combinazione e la minimizzazione JavaScript e così via, oltre a Bower per la gestione di altri pacchetti.
Nota: c'è un programma chiamato Scout per Mac e Windows che gestirà la compilazione per te, ma sempre dove possibile preferisco evitare di installare qualcosa per un solo scopo, piuttosto che lavorare con strumenti che posso usare per molteplici scopi. C'è anche CodeKit, ma solo Mac.
Quindi, quando c'è un preprocessore come Stylus che ha tutta la potenza logica di cui ho bisogno, ma può essere usato facilmente con il mio IDE preferito e la configurazione Node.js esistente o puro JavaScript, ha senso sceglierlo.
Molte persone trovano il processo di installazione per Sass intimidatorio a causa del fattore Ruby e scelgono MENO per quel motivo. Tuttavia, trovo che la facilità di configurazione di Stylus sia sostanzialmente alla pari con LESS, mentre mi offre l'intera gamma di funzionalità logiche.
Ma non si tratta solo di Ruby, o anche solo delle funzionalità logiche disponibili. Riguarda anche il modo specifico in cui lavora Stylus e la sintassi che utilizza, che trovo incredibilmente pulita, flessibile e scorrevole rispetto a LESS e Sass.
Quindi ora lascia che ti dica perché scelgo Stylus e perché potrebbe essere il tuo nuovo eroe CSS.
Come ho toccato sopra, ho scelto Stylus per i suoi:
Per mostrarti davvero perché tutto quanto sopra mi fa scegliere Stylus, dobbiamo saltarci dentro e iniziare a usarlo un po 'così posso mostrarti esattamente di cosa sto parlando.
Iniziamo con il più grande ostacolo che le persone incontrano con i preprocessori CSS, a prescindere da quello che scelgono, e questo è il setup e la compilazione.
Una grande parte del motivo per cui scelgo Stylus è che posso configurarlo come parte dei miei normali metodi di creazione di progetti, e attraverso questo posso usarlo con il mio IDE preferito. Lascia che ti mostri come.
Sì, ci sono alcuni processi da linea di comando che sono coinvolti, tuttavia prendilo da qualcuno che non ha mai usato la riga di comando per una cosa prima che i preprocessatori lo richiedessero - non è neanche lontanamente difficile come pensi, e usare la linea di comando ti farà sentire il 10% più intelligente di quello che hai fatto prima. :)
Detto questo, ho messo insieme un pacchetto, che puoi afferrare premendo il pulsante "Download" nella parte superiore di questo articolo, il che significa che non dovrai pensare alla riga di comando se sei su Windows. Bastano pochi clic e sarai attivo e funzionante.
Se sei su Mac o Linux, non temere, dato che ci sono solo tre comandi che dovrai eseguire per usare il pacchetto, ti guiderò attraverso come, e sono super facili.
Questo pacchetto guarderà i tuoi file Stylus di origine per le modifiche e li compilerà in file CSS per te. Puoi usarlo con qualsiasi IDE che desideri, il che è un grande vantaggio di questo particolare approccio.
Personalmente, è l'epico fantastico Sublime Text 2. È anche l'IDE che consiglio di utilizzare con Stylus grazie all'eccellente pacchetto di evidenziazione della sintassi di Stylus disponibile, che illustrerò qui sotto.
Node.js è praticamente un must in questi giorni per lo sviluppo web front-end. Ci sono tanti strumenti incredibili che funzionano su di esso, quindi l'installazione ti farà diventare non solo per Stylus ma anche per molte altre cose.
Vai a http://nodejs.org/download/ e scarica il programma di installazione per il tuo sistema operativo.
Esegui il programma di installazione come faresti con qualsiasi altro per mettere Node.js sul tuo sistema.
Grunt è uno strumento incredibile per eseguire attività JavaScript. Puoi utilizzarlo per oltre duemila scopi diversi tramite i suoi plugin, elencati qui: http://gruntjs.com/plugins
Nel nostro caso, lo useremo per guardare i nostri file Stylus e compilarli in CSS ogni volta che cambiano.
Preparati per il primo assaggio della riga di comando, quindi apri una finestra di comando / terminale.
Su Windows trovo il modo più semplice è solo per aprire Windows Explorer, quindi all'interno di qualsiasi cartella tenere premuto il tasto MAIUSC e fare clic destro. Nel menu di scelta rapida vedrai "Apri finestra di comando qui", che dovresti fare clic:
In alternativa è possibile fare clic sul pulsante "Start", quindi cercare "cmd" e premere INVIO per visualizzare la finestra di comando.
Se sei su Linux, immagino che probabilmente sai già come aprire un terminale, ma se non qui è una guida su come fare sulle varie distro: https://help.ubuntu.com/community/UsingTheTerminal
E se sei su Mac, dai un'occhiata a A Designer's Introduction alla riga di comando.
Ora, digita il seguente comando e premi INVIO:
npm install -g grunt-cli
Vedrai un carico di testo come questo apparire nella finestra:
Attendi fino a che tutto non finisce e viene visualizzato un nuovo prompt dei comandi. Ciò significa che l'installazione è completa e puoi quindi chiudere la finestra di comando / terminale. Devi solo farlo una volta poiché installerà Grunt sul tuo sistema con accesso globale in modo da poterlo utilizzare da qualsiasi cartella di progetto futura che hai configurato.
Ora sei pronto per configurare un progetto reale usando il pacchetto StylusCompiler che ho fornito. Questo è il processo che ripeterai per ogni nuovo progetto di design che inizi.
Facciamo questo passo dopo passo.
Crea una cartella per ospitare il tuo progetto. Per questa demo, lo chiameremo semplicemente EGProject.
Al suo interno, crea una seconda cartella denominata css. Questa è la cartella in cui verranno scritti i tuoi file CSS.
Ora estrai il StylusCompiler.zip file in questa cartella.
Dovresti ritrovarti con una struttura simile a questa:
Vai nel StylusCompiler cartella e, se sei su Windows, fai doppio clic sul file chiamato double_click_to_install.bat.
Se non sei su Windows, apri un terminale nel StylusCompiler cartella, (o aprire un terminale e quindi navigare / cd nella cartella). Digitare quanto segue quindi premere INVIO:
installazione di npmQuesto installerà il compilatore all'interno della cartella del progetto. Di nuovo vedrai un sacco di cose come questa apparire nella finestra:
Se sei su Windows e fai doppio clic sul file .bat, la finestra si chiuderà una volta completata l'installazione. In caso contrario, attendere fino a quando il testo non si ferma e viene visualizzato un nuovo prompt dei comandi. Tieni il tuo terminale aperto per il prossimo passo. Ora tutto ciò che devi fare è avviare la funzione "guarda" che il progetto ha configurato per utilizzare tramite Grunt. Questo guarderà il stilo cartella all'interno del StylusCompiler cartella per le modifiche a qualsiasi .Styl file al suo interno.
Basta creare tutti i file Stylus di cui hai bisogno stilo cartella e sei a posto. Nota: Tutti i tuoi file Stylus devono avere il .Styl estensione del file. Quando le modifiche vengono salvate su qualsiasi file in quella cartella, il pacchetto compilerà quindi il codice Stylus in CSS e lo scriverà in un file chiamato style.css nel css cartella del tuo progetto. Ancora nel StylusCompiler cartella, se sei su Windows, fai doppio clic sul file chiamato watch_and_compile.bat.
Se non sei su Windows, con il tuo terminale ancora nel StylusCompiler cartella, digitare quanto segue quindi premere INVIO:
orologio da grugnito
Dovresti vedere questo nella finestra di comando / terminale:
Ora se si salvano le modifiche in qualsiasi file nel StylusCompiler> stylus cartella, (finché non hai commesso errori nel tuo codice), vedrai quanto segue:
Quando hai finito di lavorare sui tuoi file Stylus puoi semplicemente chiudere la finestra di comando / terminale, o se hai bisogno di eseguire un altro comando, puoi premere CTRL + C per fermare l'operazione "guarda".
Uno dei motivi per cui amo lavorare con questo tipo di impostazione del progetto è che hai il completo controllo, quindi puoi impostare il tuo progetto come preferisci e cambiare in qualsiasi momento. Se vuoi cambiare cose come la cartella di output per il tuo css, il nome del file di output, se il CSS è compresso o meno, e così via, puoi farlo nel file chiamato Gruntfile.js nel StylusCompiler cartella.
Stiamo utilizzando il plugin grunt-contrib-stylus per Grunt per gestire la compilazione, in modo da poter ottenere un rundown completo su tutte le possibili configurazioni per questo qui: https://github.com/gruntjs/grunt-contrib-stylus.
Tuttavia, ecco le opzioni principali che probabilmente vorrai.
Impostare il comprimere opzione a vero per la produzione di CSS minificati e pronti, o falso per CSS espanso mentre sei ancora in sviluppo.
Il nome file predefinito che verrà scritto è "style.css". Se desideri che il nome del file sia diverso, sostituisci "style.css" con la tua scelta su questa linea.
Di default il compilatore cercherà un livello dal StylusCompiler cartella e scrivere nel css cartella in esso.
Se vuoi che i tuoi file CSS vengano scritti da qualche altra parte, cambia il valore da questa linea '... / css' alla tua posizione preferita.
Come accennato in precedenza, la bellezza di questo approccio è che puoi usare qualsiasi IDE per modificare i tuoi file Stylus e verranno compilati allo stesso modo. Tuttavia raccomando vivamente di usare Sublime Text 2 come pacchetto di evidenziazione della sintassi di Stylus disponibile, per cui lavorare con Stylus è una delizia.
Puoi scaricare Sublime Text 2 qui: http://www.sublimetext.com/2.
Dopo aver scaricato e installato, visita questa pagina e segui le istruzioni per l'installazione di "Package Control", il brillante gestore di pacchetti per Sublime Text: https://sublime.wbond.net/installation#st2
Infine, installa il pacchetto di evidenziazione della sintassi di Stylus. Apri Controllo pacchetto andando su Preferenze> Controllo pacchetto in questo modo:
Nell'elenco visualizzato, fai clic sull'opzione "Installa pacchetto" e attendi qualche secondo mentre viene recuperato un elenco di pacchetti disponibili:
Digitare "stilo" nel campo sopra l'elenco dei pacchetti per cercarlo, quindi fare clic sul risultato "Stylus" per installarlo:
Questo pacchetto diventerà difficile da leggere, con una normale formattazione CSS come questa:
... in un codice formattato Stylus facilmente differenziato come questo:
Una delle cose che AMO assolutamente di Stylus è la sua totale flessibilità sulla sintassi.
Con LESS, tutto il codice deve essere scritto nello stesso modo in cui si scriverebbe un normale CSS, cioè è necessario includere parentesi graffe, due punti e punti e virgola nello stesso modo in cui si farebbe in CSS.
Con Sass / SCSS hai una scelta:
Stylus d'altra parte è totalmente flessibile e non è necessario impostare alcuna opzione di compilazione per gestire il modo in cui si desidera scrivere.
Tutti questi esempi verranno compilati in Stylus e gli approcci alla sintassi possono essere utilizzati insieme nello stesso documento:
Solo Stylus consente l'omissione di tutti questi elementi di sintassi, a vari livelli, e la combinazione 'al volo' di questi approcci in modo da poter fare tutto ciò che si sente mentre il progetto si muove lungo.
Questa funzionalità è sorprendente per lo sviluppo. Sarai sorpreso di scoprire quanto è maggiore il tuo flusso quando ometti tutta la "punteggiatura" della sintassi che puoi. La tua codifica e il tuo processo di pensiero man mano che ti sposti diventeranno molto più fluidi. E con l'evidenziazione della sintassi fornita dal pacchetto che abbiamo installato in precedenza, troverai che il tuo codice sarà leggibile.
Ma allo stesso tempo la compilazione è molto permissiva. Se decidi, per un motivo o per l'altro, che la normale sintassi CSS renderà meglio organizzata una parte del tuo documento, puoi andare avanti e utilizzarla quando vuoi. E se per caso perdi un punto e virgola qua e là, non importa a nessuno.
Hai visto sopra alcuni esempi di come le variabili, i mixin, i controlli condizionali e le funzioni appaiono in LESS e Sass. Per i miei occhi, trovo che l'approccio di Stylus a questi è più semplice da guardare, leggere e utilizzare in generale.
In LESS, le variabili devono essere precedute con il @ simbolo. In Sass, devono essere anteposti al $ simbolo. Tuttavia in Stylus, una variabile non deve essere anteposta a nulla.
Nota: Puoi opzionalmente usare il $ simbolo se preferisci, ma non il @ simbolo in quanto è riservato ad altri scopi in Stylus.
Allo stesso modo, mixin, controlli condizionali e funzioni non devono essere preceduti da nulla in Stylus.
In LESS, un mixin deve essere scritto nello stesso modo in cui scriverebbe una normale classe CSS, e non ci sono controlli condizionali o funzioni personalizzate.
In Sass, i mixin devono essere preceduti da @mixin e chiamato con @includere, i controlli condizionali sono scritti come @Se e @altro, e le funzioni devono essere precedute da @funzione e includere una linea preceduta da @ritorno.
Nessuna di queste cose è richiesta in Stylus. Puoi semplicemente scrivere in modo naturale come potresti nel linguaggio normale. Ad esempio, in precedenza abbiamo usato questo esempio di mixin e funzione di Sass:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px solid $ border_color; @else border: 0; @if $ bg_on == true background-color: 1px solid $ bg_color; @else background-color: transparent;
@ function function-name ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Questo mixin e funzione sarebbero chiamati così:
.callem @include border_and_bg (true, # 000, true, #fff); font-size: nome-funzione (6);
In Stylus, questi potrebbero essere scritti e chiamati come segue:
Questo per me è molto pulito, facile da leggere e scrivere e in linea con l'obiettivo del preprocessore di rendere il codice pulito e minimale.
Tieni presente che mentre nell'esempio sopra ho omesso tutta la "punteggiatura" della sintassi che può essere lasciata fuori, è assolutamente facoltativo quanto ne vuoi lasciare nel tuo sviluppo.
Ad esempio, ho chiamato il border_and_bg mixin perfettamente, scrivendolo essenzialmente nello stesso modo in cui vorrei una normale proprietà CSS, senza parentesi attorno ai parametri o virgole tra di loro. Tuttavia, se preferisci puoi includere parentesi e virgole quando chiami mix, è completamente a tua discrezione.
Una delle cose migliori di lavorare con Sass e LESS sono le librerie di mixin Compass / Bourbon e LESShat, rispettivamente. Ma non perderti un'incredibile libreria di mixin con Stylus, grazie a Nib.
Il pacchetto "StylusCompiler" che ti ho fornito installa automaticamente (grazie a grunt-contrib-stylus) e include Nib nel tuo progetto, quindi non devi fare ulteriori passaggi per usarlo.
Nib fornisce mix per tutti gli effetti CSS3 che ci si aspetterebbe, ognuno dei quali può essere chiamato senza interruzioni, come se si stesse usando una normale proprietà CSS. Include anche una serie impressionante di mixaggi per altre funzioni come il posizionamento, il ripristino / normalizzazione, il clearfixing, le immagini reattive e altro ancora.
Controlla i documenti per un rundown completo qui: http://visionmedia.github.io/nib/
Nota: Una seconda opzione di libreria mixin per Stylus è Axis.
Stylus ha un sacco di altre fantastiche funzionalità, fatte in modo unico e super pulito, e dovresti davvero controllare tutto qui: http://learnboost.github.io/stylus/
Tuttavia, ci sono una coppia in particolare che amo davvero.
I parametri di rest consentono di passare un numero indeterminato di valori a un mixin senza doverli mappare esplicitamente nella creazione del mixin. È possibile estrarre un valore particolare e quindi passare il "resto" utilizzando args ... e args. Per esempio:
A volte potresti ripetere un certo valore un paio di volte, ma solo all'interno di un singolo stile, quindi dover dichiarare una variabile per tenerlo può essere eccessivo.
Con la funzione di ricerca delle proprietà, puoi cercare il valore di qualsiasi proprietà che hai dichiarato nello stesso stile o in uno stile genitore. Per esempio:
Tutto quello che devi fare è usare il @ simbolo prima della proprietà che si desidera cercare. Stylus guarderà prima nello stesso stile, e se non trova corrispondenze controllerà il genitore e continuerà a gonfiarsi fino a quando non ottiene una corrispondenza o raggiunge la radice del documento e restituisce "null".
Speriamo che ora ti senta pronto per affrontare la creazione di Stylus se prima eri diffidente nei confronti della linea di comando e sei abbastanza curioso da investigare se ami la potenza di Sass ma preferiresti lavorare con Node.js su Ruby. E anche se nessuno di questi due è particolarmente rilevante per te, spero che tu sia abbastanza incuriosito da alcuni degli approcci unici presi da Stylus per farlo girare e giocarci.
Per concludere, mi piacerebbe lasciarvi con una lista di articoli interessanti relativi a Stylus da darvi un'occhiata, alcuni citati in precedenza, così come alcuni extra.
Godere!
Accentsconagua