Share
De flesta artiklar och handledning på Emmet täcker hanteringen av HTML, men idag kommer vi att fokusera på Emmet med CSS. Klar för att turboladda ditt CSS-skrivande? Nu går vi!
Notera: Det rekommenderas att du har en rimlig förståelse för CSS innan du följer med.
Emmet är en samling förkortningar som expanderar till html / xml / css, och tar tanken på textrapporter ytterligare. Besök nedladdningssidan och installera Emmet för din redaktör.
När du arbetar med Emmet skriver du in lämplig förkortning och trycker på åtgärdsknappen. I Sublim Text är detta FLIK nyckel. Syntaxen i den fil du arbetar med bestämmer vilka förkortningar du ska använda.
Emmet använder sunt förkortningar för att göra kodskrivning enklare. Det kan hjälpa lite eller mycket, beroende på hur lång tid du investerar i att lära ins och outs.
Emmet (tidigare känd som Zen kodning) är en verktygsverktyg för webbutvecklare som kan förbättra ditt HTML & CSS-arbetsflöde.
Det sparar inte bara tid, men det gör kodskämt roligt. Det finns bara något om att skriva några tecken och titta på dem magiskt expandera till perfekt formaterad kod! Om du får något fel, återgår knappen för att ångra den expanderade koden tillbaka till förkortningen för att du ska redigera och expandera igen.
Jag har också funnit att Emmet hjälper mig att komma ihåg kod enklare. Förkortningar är enkelt enklare att memorera. text-trans: blir "tt" och text-align: motivera; blir "taj". Se hur bra det här kan vara? Du börjar lära dig nya CSS-egenskaper och behöver bara memorera förkortningarna. Du behöver inte ens oroa dig för semikolon och mellanslag, Emmet gör det här för dig!
Låt oss titta på de grundläggande komponenterna i Emets CSS förkortningar och hur de påskyndar arbetsflödet.
CSS ger värden till egenskaper, som fontstorlek, marginal, vaddering, etc..
Hämtad från det bästa sättet att lära sig CSS Emmet har definierat alla kända CSS-egenskaper med en förkortning. Så border-botten är bdb, border-top är bdt. Nedan är ett exempel på textstorlek, vilket är F Z.
Efter att ha skrivit förkortningen, tryck på åtgärdsnyckeln (i mitt fall, TAB) och Emmet kommer magiskt att mata ut förkortningen till giltigt CSS, placera markören där du behöver det.
Nu när vi förstår egenskaperna är det dags att lägga till ett värde. Detta görs genom att skriva förkortningen i kombination med det värde som behövs. Till exempel, FZ18 kommer att mata ut till typsnittstorlek: 18px;. Du behöver inte skriva "px" eftersom Emmet kommer att lägga till det som standard. Om ett objekt inte har en enhet (som font-weight), Emmet är smart nog att veta att inte lägga till px.
Vad händer om du inte alltid använder pixlar? Enheterna em, rem, %, ex, och px är alla tillgängliga i Emmet. Varje enhet (även om det här kan verka lite extrema) har också en förkortad form:
Accentsconagua
px → standardp → % e → em r → rem x → ex För att använda en enhet, lägg bara till enhetens förkortning i slutet av ditt värde. Exemplet nedan definierar en teckenstorlek med em
Vissa egenskaper, som marginal, tillåta flera värden. För att göra detta med Emmet, separera varje värde med ett streck (-). Ta en titt på exemplet nedan för att definiera fyra värden för kroppens marginal.
Emmet ber dig att förbeställa # istället för att lägga till det till ditt värde. Så # går efter din egendom, men före ditt värde. Ett annat antal tecken matar ut olika hexadecimala koder. Ta en titt på några exempel:
# 1 → # 111111 # e0 → # e0e0e0 # fc0 → # FFCC00 Här är ett exempel på att definiera kroppsfärgen som # 111 (c # 1):
Även om !Viktig tagg ska inte användas mycket ofta, erbjuder Emmet det bara incase. Lägg till ett utropstecken ! till din förkortning som så:
Nu när vi har en grundläggande förståelse för Emets CSS-funktioner, är det dags att börja sätta ihop dem. På liknande sätt som HTML-funktionerna lägger du till ett plustecken (+) för varje objekt. Kom ihåg att om du förstör något, kan du alltid slå och ångra och ändra strängen.
Skriv alla dina önskade egenskaper och värden, separera var och en med a + och tryck sedan på funktionsknappen för att se resultatet.
Här är ett exempel på att definiera olika marginaler och paddningar för kropp.
Kom ihåg att du kan använda alla dessa förkortningar tillsammans eller separat. Det handlar inte om att få Emmet-koderna precis rätt första gången, det handlar bara om att göra det enklare att skriva din CSS. För att paketera upp dessa coola animerade GIF-filer, här är en snabb demo av styling som skapar en div med en klass av panel.
Emmet är ett kraftfullt verktyg. Påstås av vissa som ett "höghastighets" kodningsverktyg, så att du spenderar mindre tid på att skriva samma saker om och om igen utan att manuellt skapa egna fragment. Emmet blev inspirerad av CSS-väljare och kan användas i alla större textredigerare för att passa alla utvecklares arbetsflöde.
Kom ihåg att något nytt verktyg du lägger till i ditt arbetsflöde kommer att ha en inlärningskurva, men ta inte mer tid än vad du behöver veta hur det fungerar för dig. Att regelbundet besöka dokumentationen är en bra uppdatering, och Emmet ger ett fuskblad med alla möjliga funktioner. Detta har byggts för att hjälpa dig att tänka mindre och skriva mer kod!
Hur använder du Emmet i ditt arbetsflöde? Vad är din favorit CSS-funktion? Låt oss veta i kommentarerna!
