Emmet è uno dei plugin di text editor più utili che tu possa mai incontrare per gli sviluppatori. Ha la capacità apparentemente magica di trasformare un pezzettino di lavoro in una tonnellata di codice, che può farti risparmiare una quantità incredibile di tempo e fatica nel lungo periodo.
In precedenza, abbiamo esaminato alcune delle migliori funzionalità di Emmet da una prospettiva HTML, oggi seguiremo questo con alcuni suggerimenti su come Emmet può migliorare il flusso di lavoro CSS.
1. Abbreviazioni intuitive
Lavorare con Emmet in HTML è piuttosto semplice. Dopo aver appreso alcuni concetti chiave, puoi praticamente continuare a utilizzarlo da solo. Con i CSS però, ci sono letteralmente centinaia di frammenti da memorizzare. È fantastico avere così tante funzionalità, ma come si può prendere tutto?
La buona notizia è che Emmet utilizza abbreviazioni completamente intuitive. Infatti, nella maggior parte dei casi, la prima abbreviazione che si pensa di provare risulta essere corretta. Ecco due esempi:
Come potete vedere, text-align è abbreviato a ta e larghezza del bordo è abbreviato a BDW. Molte abbreviazioni sono persino attivate da un singolo carattere. Per esempio, z si espande a z-index.
2. Aggiungi valori
Con Emmet puoi fare molto di più che espandere le abbreviazioni in proprietà. Ad esempio, puoi facilmente inserire un valore nella tua abbreviazione usando la sintassi del colon.
Qui, :10 esteso a 10px e un esteso a auto. Puoi anche specificare le tue unità con questo metodo semplicemente lanciandole alla fine. Nota che p è una bella scorciatoia per%.
3. Ricerca sfocata
L'unica caratteristica migliore di Emmet da una prospettiva CSS è chiamata? Fuzzy search ?. Ciò significa che in realtà non devi conoscere l'abbreviazione corretta per raggiungere l'espansione che stai cercando. Puoi letteralmente fare schifo, e nella maggior parte dei casi, Emmet è abbastanza intelligente da capire che cosa stai cercando di ottenere.
La ricerca fuzzy aumenta notevolmente l'utilità di Emmet per scrivere CSS. Ti consente praticamente di abbandonare la sintassi standard in favore di quello che ti piace di più. Ad esempio, uso raramente i due punti per aggiungere un valore e digitare invece qualcosa di simile m10, che si espande in margine: 10px.
4. Usa + per gli extra
Con HTML, il? +? il simbolo è usato per le relazioni tra fratelli, ma nel CSS lo vediamo usato in modo diverso. Qui aggiungiamo + per indicare che vogliamo che Emmet includa tutte le opzioni extra incluse nell'abbreviazione. Lo vediamo molto quando esiste una versione abbreviata di un determinato insieme di proprietà.
Qui puoi vedere che se semplicemente espandiamo f, noi abbiamo dimensione del font senza extra. Tuttavia, quando inseriamo il? +?, Otteniamo un modello per la stenografia dei font. Successivamente, vediamo questa stessa idea in azione con la stenografia del confine.
Puoi usare il simbolo più con immagini di sfondo, @ font-face, testo-outline, text-shadow e altro.
5. Prefissi fornitore
Odio battere tutti quei fastidiosi prefissi dei venditori? Anche a me. Per fortuna, Emmet ti ha coperto. Digita una proprietà CSS con un trattino prima e verrà automaticamente espansa per includere tutti i prefissi pertinenti.
È possibile eseguire questa azione su quasi tutto ciò che si desidera. Ad esempio, se digiti ? -Designshack?, sarà espanso in -webkit-designshack, -moz-designshack, eccetera.
6. Sfumature
La sintassi del gradiente fa schifo, lo sappiamo tutti. È cambiato e si è evoluto troppe volte per contare, è stato attraverso ogni possibile combinazione di troppo complesso e semplice, e non solo devi tenere conto di tutti i prefissi, ma anche di almeno due diverse iterazioni della versione -webkit.
Ancora una volta, Emmet piomba in per salvare la giornata. È possibile risparmiare un sacco di digitazione utilizzando la sintassi unica del gradiente di stenografia di Emmet, che si espanderà nell'enorme quantità di codice necessaria. Puoi leggere di più su questo e provalo qui.
Provali!
Ora che conosci un sacco di fantastici trucchi CSS da provare con Emmet, è il momento di dargli una possibilità. Colpisci la nostra pagina demo Emmet e prova alcune delle abbreviazioni che abbiamo esaminato sopra. Assicurati inoltre di aprire la home page di Emmet, dove puoi imparare di più e provarlo subito.
Come posso espandere le abbreviazioni?
L'espansione può essere diversa in ogni editor e in genere richiede un plug-in. In Sublime Text 2, apri Gestione pacchetti, cerca Emmet, installalo, quindi riavvia l'app. Per attivare un'espansione, basta premere linguetta dopo aver digitato un'abbreviazione.
Condividi le tue macro preferite di Emmet CSS
Questa è la mia lista personale delle caratteristiche preferite di Emmet CSS, ora è il momento per te di entrare nella conversazione e condividere la tua. Lascia un commento qui sotto ed elenca le funzioni CSS che usi maggiormente in Emmet.