Emmet ist eines der nützlichsten Plugins für Texteditoren, auf das Sie jemals für Entwickler stoßen werden. Es hat die scheinbar magische Fähigkeit, ein kleines Stückchen Arbeit in eine Menge Code zu verwandeln, was auf lange Sicht unglaublich viel Zeit und Mühe sparen kann.
Zuvor haben wir uns einige der besten Funktionen von Emmet aus einer HTML-Perspektive angesehen. Heute folgen wir diesem Thema mit einigen Tipps, wie Emmet Ihren CSS-Workflow verbessern kann.
1. Intuitive Abkürzungen
Die Arbeit mit Emmet in HTML ist ziemlich unkompliziert. Nachdem Sie ein paar Schlüsselkonzepte kennengelernt haben, können Sie damit ziemlich alleine laufen. Bei CSS gibt es jedoch hunderte von Ausschnitten, die man sich merken kann. Es ist großartig, so viele Funktionen zu haben, aber wie können Sie das alles in Kauf nehmen?
Die gute Nachricht ist, dass Emmet Abkürzungen verwendet, die vollständig intuitiv sind. In den meisten Fällen erweist sich die erste Abkürzung, die Sie als zu versuchen erachten, als richtig. Hier sind zwei Beispiele:
Wie du siehst, Textausrichtung wird zu verkürzt ta und Rahmenbreite wird zu verkürzt bdw. Viele Abkürzungen werden sogar von einem einzelnen Zeichen ausgelöst. Zum Beispiel, z erweitert zu z-index.
2. Werte hinzufügen
Mit Emmet können Sie viel mehr tun, als Abkürzungen in Eigenschaften zu erweitern. Zum Beispiel können Sie mithilfe der Doppelpunktsyntax einen Wert einfach in Ihre Abkürzung einfügen.
Hier, :10 erweitert zu 10px und ein erweitert zu Auto. Sie können Ihre Einheiten auch mit dieser Methode angeben, indem Sie sie am Ende einfach einwerfen. Beachten Sie, dass p ist eine nette Abkürzung für%.
3. Ungenaue Suche
Die einzige beste Funktion von Emmet aus CSS-Sicht heißt "Fuzzy-Suche". Dies bedeutet, dass Sie nicht die richtige Abkürzung kennen müssen, um zu der gewünschten Erweiterung zu gelangen. Sie können buchstäblich Mist machen, und in den meisten Fällen ist Emmet klug genug, um herauszufinden, was Sie erreichen wollen.
Die Fuzzy-Suche erhöht die Nützlichkeit von Emmet für das Schreiben von CSS erheblich. Damit können Sie die Standardsyntax zugunsten Ihrer Lieblingsbeschäftigung weitgehend aufgeben. Zum Beispiel verwende ich selten einen Doppelpunkt, um einen Wert hinzuzufügen und stattdessen etwas einzugeben m10, die sich in erweitert Marge: 10px.
4. Verwenden Sie + für Extras
Mit HTML wird das? +? Symbol wird für Geschwisterbeziehungen verwendet, aber in CSS sehen wir, dass es anders verwendet wird. Hier fügen wir + hinzu, um anzugeben, dass Emmet zusätzliche Optionen enthalten soll, die in der Abkürzung enthalten sind. Wir sehen dies häufig, wenn es eine Kurzfassung einer bestimmten Gruppe von Eigenschaften gibt.
Hier sehen Sie das, wenn wir einfach erweitern f, wir bekommen Schriftgröße ohne Extras. Wenn wir jedoch das? +? Einfügen, erhalten wir eine Vorlage für die Schriftenschriftart. Als nächstes sehen wir dieselbe Idee in Aktion mit der Grenzkurzschrift.
Sie können das Plus-Symbol mit Hintergrundbildern, @ font-face, Text-Gliederung, Text-Schatten und mehr verwenden.
5. Hersteller-Präfixe
Hassen Sie es nicht, all diese lästigen Herstellerpräfixe einzugeben? Ich auch. Zum Glück hat Emmet dich abgedeckt. Geben Sie eine CSS-Eigenschaft mit einem Bindestrich ein und es wird automatisch erweitert, um alle relevanten Präfixe einzuschließen.
Sie können diese Aktion für fast alles ausführen, was Sie möchten. Zum Beispiel, wenn Sie aussteigen ? -Designshack?wird es erweitert werden -webkit-designshack, -moz-designshack, usw.
6. Farbverläufe
Gradientensyntax ist scheiße, wir alle wissen es. Es hat sich zu oft geändert und zu viele Male entwickelt, um es zu zählen, es wurde durch jede mögliche Kombination von zu komplex und einfach durchgegangen, und Sie müssen nicht nur alle Präfixe berücksichtigen, sondern auch mindestens zwei verschiedene Iterationen der -webkit-Version.
Erneut stürzt Emmet ein, um den Tag zu retten. Sie können sich viel Tipparbeit sparen, indem Sie die einzigartige Abkürzungsgradienten-Syntax von Emmet verwenden, die sich in den riesigen Code, den Sie benötigen, erweitert. Sie können mehr darüber lesen und es hier ausprobieren.
Probiere sie aus!
Nun, da Sie eine Reihe großartiger CSS-Tricks kennen, die Sie mit Emmet ausprobieren können, ist es an der Zeit, ihnen eine Chance zu geben. Besuchen Sie unsere Emmet-Demo-Seite und probieren Sie ein paar Abkürzungen aus, die wir oben beschrieben haben. Besuchen Sie auch die Emmet-Homepage, auf der Sie mehr erfahren und es selbst ausprobieren können.
Wie kann ich Abkürzungen erweitern?
Die Erweiterung kann in jedem Editor unterschiedlich sein und erfordert normalerweise ein Plugin. Öffnen Sie in Sublime Text 2 den Package Manager, suchen Sie nach Emmet, installieren Sie ihn und starten Sie die App erneut. Um eine Erweiterung auszulösen, drücken Sie einfach Tab nachdem Sie eine Abkürzung eingegeben haben.
Teilen Sie Ihre bevorzugten CSS-Makros von Emmet
Das ist meine persönliche Liste der beliebtesten CSS-Features von Emmet. Jetzt ist es an der Zeit, dass Sie in die Konversation einsteigen und Ihre eigenen mit anderen teilen. Hinterlassen Sie einen Kommentar und listen Sie die CSS-Funktionen auf, die Sie in Emmet am häufigsten verwenden.