Emmet är en av de mest användbara textredigerare plugins som du någonsin kommer över för utvecklare. Det har den till synes magiska förmågan att göra en liten bit av arbete till ett ton kod, vilket kan spara dig en otrolig mängd tid och ansträngning på lång sikt.
Tidigare tog vi en titt på några av de bästa egenskaperna hos Emmet från ett HTML-perspektiv. Idag följer vi upp det med några tips för hur Emmet kan förbättra ditt CSS-arbetsflöde.
1. Intuitiva förkortningar
Att arbeta med Emmet i HTML är ganska enkelt. När du har läst några nyckelbegrepp kan du ganska enkelt köra med det själv. Med CSS finns det dock bokstavligen hundratals utdrag att memorera. Det är fantastiskt att ha så mycket funktionalitet, men hur kan du eventuellt ta det hela in?
Den goda nyheten är att Emmet använder förkortningar som är helt intuitiva. I själva verket är det i de flesta fall den första förkortningen du tycker att försöka visa sig vara korrekt. Här är två exempel:
Som du kan se, text-align förkortas till ta och gränsbredd förkortas till BDW. Många förkortningar utlöses till och med av en enda karaktär. Till exempel, z expanderar till z-index.
2. Lägg till värden
Du kan göra mycket mer med Emmet än utöka förkortningar till egenskaper. Till exempel kan du enkelt kasta ett värde i din förkortning med kolonsyntaxen.
Här, :10 expanderat till 10px och en expanderat till bil. Du kan också ange dina enheter med den här metoden genom att helt enkelt kasta dem i slutet. Anteckna det p är en bra genväg för%.
3. Fuzzy Search
Den enda bästa egenskapen hos Emmet från ett CSS-perspektiv kallas "fuzzy search". Vad det innebär är att du inte behöver känna till rätt förkortning för att komma till den expansion du letar efter. Du kan bokstavligen göra skit upp, och i de flesta fall är Emmet tillräckligt smart för att ta reda på vad det är som du försöker uppnå.
Fuzzy search ökar väsentligt användbarheten av Emmet för att skriva CSS. Det låter dig ganska dugga den vanliga syntaxen till förmån för vad du vill bäst. Till exempel använder jag sällan ett kolon för att lägga till ett värde och istället skriva något liknande m10, som expanderar in i marginal: 10px.
4. Använd + för extrafunktioner
Med HTML,?? symbol används för syskon relationer, men i CSS ser vi att den används annorlunda. Här lägger vi till + för att ange att vi vill att Emmet ska inkludera eventuella extraalternativ som ingår i förkortningen. Vi ser det här mycket när det finns en kortversion av en given uppsättning egenskaper.
Här kan du se om vi helt enkelt utökar f, vi får textstorlek utan extrafunktioner. Men när vi slänger in? +? Får vi en mall för teckensnittet. Därefter ser vi samma idé i aktion med gränshorthand.
Du kan använda plus-symbolen med bakgrundsbilder, @ font-face, text-skiss, textskugga och mer.
5. Leverantörs prefix
Hatar att skriva ut alla dessa irriterande leverantörs prefix? Jag med. Lyckligtvis har Emmet du täckt. Skriv ut en CSS-egenskap med en bindestreck före den och den utvidgas automatiskt till att inkludera alla relevanta prefix.
Du kan utföra denna åtgärd på nästan vad som helst du vill ha. Till exempel, om du skriver ut ? -Designshack?, det kommer att utvidgas till -webkit-designshack, -moz-designshack, etc.
6. gradienter
Gradientsyntax suger, vi vet alla. Det har förändrats och utvecklats för många gånger för att räkna, det har varit genom alla möjliga kombinationer av alltför komplicerade och enkla, och du måste inte bara redogöra för alla prefix, men också minst två olika iterationer av webkit-versionen.
Än en gång snubblar Emmet in för att rädda dagen. Du kan spara dig mycket att skriva med hjälp av Emmets unika stenografi syntax, som kommer att expandera till den stora biten av kod som du behöver. Du kan läsa mer om detta och prova det här.
Prova dem!
Nu när du vet en massa bra CSS-tricks för att prova med Emmet, är det dags att ge dem ett skott. Hit upp vår Emmet demo sida och prova några av de förkortningar som vi gick över ovan. Också vara säker på att träffa Emmet hemsida, där du kan lära dig mer och prova det själv med en gång.
Hur utvidgar jag förkortningar?
Expansion kan vara annorlunda i varje redaktör och kräver vanligtvis ett plugin. I Sublime Text 2, öppna Package Manager, sök efter Emmet, installera det och starta om appen. För att utlösa en expansion klickar du helt enkelt på flik efter att ha skrivit in en förkortning.
Dela dina favorit Emmet CSS-makron
Det är min personliga lista över favorit Emmet CSS-funktioner, nu är det dags för dig att hoppa in i konversationen och dela med dig. Lämna en kommentar nedan och lista de CSS-funktioner som du vänder dig mest till i Emmet.