Share
La maggior parte degli articoli e delle esercitazioni su Emmet coprono la gestione di HTML, ma oggi ci concentreremo su Emmet con i CSS. Sei pronto per caricare la tua scrittura CSS? Andiamo!
Nota: Si consiglia di avere una ragionevole comprensione dei CSS prima di seguire.
Emmet è una raccolta di abbreviazioni che si espandono in html / xml / css, portando ulteriormente l'idea dei frammenti di testo. Visita la pagina di download e installa Emmet come editor preferito.
Quando lavori con Emmet, digita l'abbreviazione appropriata e premi il tasto azione. In Sublime Text questo è il TAB chiave. La sintassi del file su cui stai lavorando determinerà quali abbreviazioni usare.
Emmet usa abbreviazioni di buon senso per semplificare la scrittura del codice. Può aiutare un po 'o molto, a seconda della quantità di tempo che investi nell'apprendimento dei dettagli.
Emmet (precedentemente noto come Codifica Zen) è un toolkit per sviluppatori web che può migliorare notevolmente il flusso di lavoro HTML e CSS.
Non solo ti fa risparmiare tempo, ma rende divertente scrivere codice. C'è solo qualcosa nel digitare alcuni personaggi e vederli magicamente espandersi in un codice perfettamente formattato! Se ottieni qualcosa di sbagliato, il pulsante Annulla riporta il codice espanso all'abbreviazione affinché tu possa modificarlo ed espanderlo di nuovo.
Ho anche scoperto che Emmet mi aiuta a ricordare il codice più facilmente. Le abbreviazioni sono semplicemente più facili da memorizzare. text-transform: diventa "tt" e text-align: justify; diventa "taj". Vedi quanto utile può essere? Inizierai a imparare nuove proprietà CSS e dovrai solo memorizzare le abbreviazioni. Non devi nemmeno preoccuparti di punti e virgola, Emmet fa quella roba per te!
Diamo un'occhiata ai componenti di base delle abbreviazioni CSS di Emmet e al modo in cui velocizzano il flusso di lavoro.
I CSS danno valori alle proprietà, come font-size, margin, padding, ecc.
Tratto dal modo migliore per imparare i CSS Emmet ha definito ogni proprietà CSS conosciuta con un'abbreviazione. Così border-bottom è bdb, border-top è BDT. Di seguito è riportato un esempio di dimensione del font, che è fz.
Dopo aver digitato l'abbreviazione, premi il tasto azione (nel mio caso, TAB) e Emmet genererà magicamente l'abbreviazione in CSS valido, posizionando il cursore dove ti serve.
Ora che comprendiamo le proprietà, è il momento di aggiungere un valore. Questo viene fatto digitando l'abbreviazione in combinazione con il valore necessario. Per esempio, FZ18 uscirà a font-size: 18px;. Non è necessario digitare "px" perché Emmet lo aggiungerà per impostazione predefinita. Se un oggetto non ha un'unità (come font-weight), Emmet è abbastanza intelligente da sapere di non aggiungere il px.
Cosa succede se non usi sempre i pixel? Le unità em, rem, %, ex, e px sono tutti disponibili in Emmet. Ogni unità (anche se questo potrebbe sembrare un po 'estremo) ha anche una forma abbreviata:
Accentsconagua
px → predefinitop → % e → em r → rem X → ex Per usare un'unità, aggiungi l'abbreviazione dell'unità alla fine del tuo valore. L'esempio seguente definisce una dimensione del carattere con em
Alcune proprietà, come margine, consentire più valori. Per fare ciò con Emmet, separare ogni valore con un trattino (-). Dai un'occhiata all'esempio qui sotto per definire quattro valori per il corpo margine.
Emmet ti chiede di anteicarti # invece di aggiungerlo al tuo valore. Così la # va dopo la tua proprietà, ma prima del tuo valore. Un diverso numero di caratteri emette diversi codici esadecimali. Dai un'occhiata ad alcuni esempi:
# 1 → # 111111 # e0 → # e0e0e0 # FC0 → # FFCC00 Ecco un esempio di definizione del colore del corpo come # 111 (c 1 #):
Anche se il !importante il tag non dovrebbe essere usato molto spesso, Emmet lo offre solo in caso di necessità. Aggiungi un punto esclamativo ! alla tua abbreviazione in questo modo:
Ora che abbiamo una conoscenza di base delle funzioni CSS di Emmet, è ora di iniziare a metterle insieme. In modo simile alle funzioni HTML, aggiungerai un segno più (+) per ogni articolo. Ricorda, se fai un pasticcio, puoi sempre premere annulla e rivedere la stringa.
Scrivi tutte le proprietà e i valori richiesti, separandoli ciascuno con a + e poi premi il tasto azione per vedere il risultato.
Ecco un esempio di definizione di diversi margini e paddings per il corpo.
Ricorda, puoi usare tutte queste abbreviazioni insieme o separatamente. Non si tratta di ottenere i codici di Emmet esattamente al primo colpo, è solo per rendere più facile scrivere il tuo CSS. Per concludere queste fantastiche GIF animate, ecco una breve demo dello styling che crea un div con una classe di pannello.
Emmet è uno strumento potente. Sostenuto da alcuni come uno strumento di codifica "ad alta velocità", consente di dedicare meno tempo a scrivere sempre le stesse cose senza dover creare manualmente i propri frammenti. Emmet è stato ispirato dai selettori CSS e può essere utilizzato in tutti i principali editor di testo per adattarsi al flusso di lavoro di qualsiasi sviluppatore.
Ricorda, qualsiasi nuovo strumento che aggiungi al tuo flusso di lavoro avrà una curva di apprendimento, ma non impiegare più tempo del necessario per capire come funziona per te. Visitare regolarmente la documentazione è un ottimo ripasso, ed Emmet fornisce un cheat sheet con tutte le possibili funzioni. Questo è stato creato per aiutarti a pensare meno e scrivere più codice!
Come usi Emmet nel tuo flusso di lavoro? Qual è la tua funzione CSS preferita? Fateci sapere nei commenti!
