Share
De meeste artikelen en tutorials over Emmet behandelen de omgang met HTML, maar vandaag gaan we ons richten op Emmet met CSS. Klaar om je CSS-schrijven te turbo-laden? Laten we gaan!
Notitie: Het wordt aanbevolen dat u een redelijk begrip van CSS heeft voordat u meegaat.
Emmet is een verzameling afkortingen die uitbreiden naar html / xml / css, waarbij het idee van tekstfragmenten verder wordt ontwikkeld. Ga naar de downloadpagina en installeer Emmet voor je favoriete editor.
Wanneer u met Emmet werkt, typt u de juiste afkorting in en drukt u op de actietoets. In Sublime Text is dit de TAB sleutel. De syntaxis van het bestand waaraan u werkt, bepaalt welke afkortingen moeten worden gebruikt.
Emmet gebruikt afkortingen voor gezond verstand om het schrijven van codes eenvoudiger te maken. Het kan een beetje of veel helpen, afhankelijk van de hoeveelheid tijd die je investeert in het leren van de ins en outs.
Emmet (voorheen bekend als Zen-codering) is een toolkit voor web-ontwikkelaars die uw HTML & CSS-workflow aanzienlijk kan verbeteren.
Het bespaart u niet alleen tijd, maar het maakt het schrijven van code ook leuk. Er is gewoon iets over het typen van een paar karakters en het bekijken ervan magisch uitbreiden naar perfect geformatteerde code! Als je iets fout doet, zet de knop Ongedaan maken de uitgebreide code terug naar de afkorting die je opnieuw moet bewerken en uitbreiden.
Ik heb ook gemerkt dat Emmet me helpt de code gemakkelijker te onthouden. Afkortingen zijn eenvoudiger te onthouden. text-transform: wordt "tt" en text-align: rechtvaardigen; wordt "taj". Zie hoe nuttig dit kan zijn? U begint nieuwe CSS-eigenschappen te leren en hoeft alleen de afkortingen te onthouden. Je hoeft je geen zorgen te maken over puntkomma's en spaties, Emmet doet dat voor je!
Laten we eens kijken naar de basiscomponenten van Emmet's CSS-afkortingen en hoe ze de workflow versnellen.
CSS geeft waarden aan eigenschappen, zoals lettergrootte, marge, opvulling, enz.
Genomen uit de beste manier om CSS te leren Emmet heeft elke bekende CSS-eigenschap met een afkorting gedefinieerd. Zo border-bottom is bdb, border-top is bdt. Hieronder is een voorbeeld van lettertypegrootte, welke is FZ.
Na het typen van de afkorting, druk op de actietoets (in mijn geval, TAB) en Emmet zal op magische wijze de afkorting uitvoeren naar geldige CSS, de cursor plaatsen waar je hem nodig hebt.
Nu we de eigenschappen begrijpen, is het tijd om een waarde toe te voegen. Dit doe je door de afkorting in te typen in combinatie met de gewenste waarde. Bijvoorbeeld, FZ18 zal uitvoeren naar lettergrootte: 18px;. U hoeft "px" niet te typen, omdat Emmet dit standaard toevoegt. Als een item geen eenheid heeft (zoals lettertype dikte), Is Emmet slim genoeg om te weten dat de px niet moet worden toegevoegd.
Wat als u niet altijd pixels gebruikt? De eenheden em, rem, %, ex, en px zijn allemaal beschikbaar in Emmet. Elke eenheid (hoewel dit misschien een beetje extreem lijkt) heeft ook een verkorte vorm:
Accentsconagua
px → standaardp → % e → em r → rem X → ex Als u een eenheid wilt gebruiken, voegt u de afkorting van de eenheid toe aan het einde van uw waarde. Het onderstaande voorbeeld definieert een lettergrootte met em
Sommige eigenschappen, zoals marge, meerdere waarden toestaan. Om dit met Emmet te doen, scheidt u elke waarde met een streepje (-). Bekijk het onderstaande voorbeeld voor het definiëren van vier waarden voor de body's marge.
Emmet vraagt om je voor te bereiden # in plaats van het aan je waarde toe te voegen. Dus de # gaat na uw eigendom, maar vóór uw waarde. Een ander aantal tekens voert verschillende hexadecimale codes uit. Bekijk enkele voorbeelden:
# 1 → # 111111 # e0 → # e0e0e0 # fc0 → # FFCC00 Hier is een voorbeeld van het definiëren van de lichaamskleur als # 111 (C # 1):
Hoewel het !belangrijk tag mag niet vaak worden gebruikt, Emmet biedt het gewoon incase aan. Voeg een uitroepteken toe ! naar je afkorting als volgt:
Nu we een basiskennis hebben van de CSS-functies van Emmet, is het tijd om ze samen te voegen. Op dezelfde manier als de HTML-functies, voegt u een plusteken toe (+) voor elk item. Onthoud dat als je iets in de war brengt, je altijd ongedaan kunt maken en de reeks kunt herzien.
Schrijf al uw vereiste eigenschappen en waarden, scheid ze met een + en druk vervolgens op de actietoets om het resultaat te zien.
Hier is een voorbeeld van het definiëren van verschillende marges en paddings voor de lichaam.
Vergeet niet dat u al deze afkortingen samen of afzonderlijk kunt gebruiken. Het gaat er niet om de Emmet-codes de eerste keer precies goed te krijgen, het gaat er alleen maar om het gemakkelijker te maken om je CSS te schrijven. Om deze coole geanimeerde GIF's af te ronden, hier is een korte demo van styling waarmee een div wordt gemaakt met een klasse van paneel.
Emmet is een krachtig hulpmiddel. Door sommigen geclaimd als een "high-speed" coderingstool, kunt u minder tijd besteden aan het steeds opnieuw schrijven van dezelfde dingen zonder handmatig uw eigen fragmenten te hoeven maken. Emmet werd geïnspireerd door CSS-selectors en kan worden gebruikt in alle belangrijke teksteditors om in de workflow van elke ontwikkelaar te passen.
Onthoud dat elke nieuwe tool die u aan uw workflow toevoegt, een leercurve zal hebben, maar neem niet meer tijd in beslag dan u nodig heeft om uit te zoeken hoe dit voor u werkt. Regelmatig een bezoek aan de documentatie is een geweldige opfriscursus en Emmet biedt een spiekbriefje met alle mogelijke functies. Dit is gebouwd om u te helpen minder na te denken en meer code te schrijven!
Hoe gebruik je Emmet in je workflow? Wat is je favoriete CSS-functie? Laat het ons weten in de comments!
