Share
Die meisten Artikel und Tutorials zu Emmet behandeln den Umgang mit HTML. Heute konzentrieren wir uns auf Emmet mit CSS. Sind Sie bereit, Ihr CSS-Schreiben aufzuladen? Lass uns gehen!
Hinweis: Es wird empfohlen, dass Sie ein gutes Verständnis von CSS haben, bevor Sie weiterarbeiten.
Emmet ist eine Sammlung von Abkürzungen, die sich in html / xml / css erweitern und die Idee von Textausschnitten erweitern. Besuchen Sie die Download-Seite und installieren Sie Emmet für Ihren Editor.
Geben Sie bei der Arbeit mit Emmet die entsprechende Abkürzung ein und drücken Sie die Aktionstaste. In Sublime Text ist dies das TAB Schlüssel. Die Syntax der Datei, an der Sie gerade arbeiten, bestimmt, welche Abkürzungen verwendet werden.
Emmet verwendet gebräuchliche Abkürzungen, um das Schreiben von Code zu vereinfachen. Es kann ein wenig oder viel helfen, je nachdem, wie viel Zeit Sie in das Lernen der Ins und Outs investieren.
Emmet (früher bekannt als Zen-Codierung) ist ein Toolkit für Webentwickler, das Ihren HTML- und CSS-Workflow erheblich verbessern kann.
Das spart nicht nur Zeit, sondern macht auch das Schreiben von Code Spaß. Es gibt nur etwas, wenn Sie ein paar Zeichen eingeben und zusehen, wie sie sich in perfekt formatiertem Code zaubern. Wenn Sie einen Fehler feststellen, kehrt die Schaltfläche Rückgängig den erweiterten Code in die Abkürzung zurück, die Sie bearbeiten und erneut erweitern können.
Ich habe auch festgestellt, dass Emmet mir hilft, sich leichter an Code zu erinnern. Abkürzungen sind einfach zu merken. Text-Transformation: wird zu "tt" und Text ausrichten: begründen; wird "taj". Sehen Sie, wie hilfreich das sein kann. Sie lernen neue CSS-Eigenschaften und müssen sich nur die Abkürzungen merken. Sie müssen sich nicht einmal um Semikolons und Leerzeichen kümmern, Emmet erledigt das für Sie!
Schauen wir uns die grundlegenden Komponenten der CSS-Abkürzungen von Emmet an und wie sie den Arbeitsablauf beschleunigen.
CSS gibt den Eigenschaften Werte wie Schriftgröße, Rand, Auffüllung usw.
Aus dem besten Weg, um CSS zu lernen Emmet hat jede bekannte CSS-Eigenschaft mit einer Abkürzung definiert. So Rand unten ist bdb, Rand oben ist bdt. Unten ist ein Beispiel von Schriftgröße, welches ist fz.
Nachdem Sie die Abkürzung eingegeben haben, drücken Sie die Aktionstaste (in meinem Fall TAB). Emmet gibt die Abkürzung auf magische Weise in gültiges CSS aus und positioniert den Cursor dort, wo Sie sie benötigen.
Nun, da wir die Eigenschaften verstehen, ist es Zeit, einen Wert hinzuzufügen. Dazu geben Sie die Abkürzung in Kombination mit dem erforderlichen Wert ein. Zum Beispiel, fz18 wird an ausgegeben Schriftgröße: 18px;. Sie müssen nicht "px" eingeben, da Emmet dies standardmäßig hinzufügt. Wenn ein Artikel keine Einheit hat (wie Schriftgewicht), Ist Emmet klug genug, das px nicht hinzuzufügen.
Was ist, wenn Sie nicht immer Pixel verwenden? Die Einheiten em, rem, %, Ex, und px sind alle in Emmet verfügbar. Jede Einheit (auch wenn dies ein bisschen extrem erscheinen mag) hat auch eine abgekürzte Form:
Accentsconagua
px → Standardp → % e → em r → rem x → Ex Um eine Einheit zu verwenden, hängen Sie einfach die Abkürzung der Einheit am Ende Ihres Werts an. Das folgende Beispiel definiert eine Schriftgröße mit em
Einige Eigenschaften wie Spanne, mehrere Werte zulassen. Trennen Sie dazu mit Emmet jeden Wert durch einen Bindestrich (-). Sehen Sie sich das Beispiel unten an, um vier Werte für den Körper zu definieren Spanne.
Emmet bittet Sie, vorauszusehen # anstatt es an Ihren Wert anzuhängen. Also die # geht nach Ihrem Eigentum, aber vor Ihrem Wert. Eine andere Anzahl von Zeichen gibt verschiedene Hexadezimalcodes aus. Sehen Sie sich einige Beispiele an:
# 1 → # 111111 # e0 → # e0e0e0 # fc0 → # ffcc00 Hier ist ein Beispiel für die Definition der Körperfarbe als # 111 (c # 1):
Obwohl die !wichtig Das Tag sollte nicht sehr oft verwendet werden, Emmet bietet es einfach an. Fügen Sie ein Ausrufezeichen hinzu ! zu deiner Abkürzung wie folgt:
Nun, da wir ein grundlegendes Verständnis der CSS-Funktionen von Emmet besitzen, ist es an der Zeit, sie zusammenzubauen. Ähnlich wie bei den HTML-Funktionen fügen Sie ein Pluszeichen hinzu (+) für jeden Gegenstand. Denken Sie daran, wenn Sie etwas vermasseln, können Sie die Zeichenfolge jederzeit rückgängig machen und überarbeiten.
Schreiben Sie alle erforderlichen Eigenschaften und Werte und trennen Sie diese mit einem + und dann die Aktionstaste drücken, um das Ergebnis zu sehen.
Hier ist ein Beispiel für die Definition verschiedener Ränder und Polsterungen für die Karosserie.
Denken Sie daran, dass Sie alle diese Abkürzungen zusammen oder getrennt verwenden können. Es geht nicht darum, die Emmet-Codes beim ersten Mal genau richtig zu machen, es geht nur darum, das Schreiben von CSS zu vereinfachen. Um diese coolen animierten GIFs zusammenzufassen, folgt eine kurze Styling-Demo, bei der ein Div mit einer Klasse von erstellt wird Panel.
Emmet ist ein mächtiges Werkzeug. Von einigen als "High-Speed" -Programmierungstool behauptet, können Sie immer wieder dieselben Dinge schreiben, ohne Ihre eigenen Snippets manuell erstellen zu müssen. Emmet wurde von CSS-Selektoren inspiriert und kann in allen gängigen Texteditoren verwendet werden, um sich an den Workflow eines Entwicklers anzupassen.
Denken Sie daran, dass jedes neue Werkzeug, das Sie zu Ihrem Workflow hinzufügen, eine Lernkurve hat. Nehmen Sie sich jedoch nicht mehr Zeit, um herauszufinden, wie es für Sie funktioniert. Ein regelmäßiger Besuch der Dokumentation ist eine großartige Auffrischung, und Emmet stellt Ihnen einen Spickzettel mit allen möglichen Funktionen zur Verfügung. Dies wurde entwickelt, um Ihnen beim Denken zu helfen und mehr Code zu schreiben!
Wie verwenden Sie Emmet in Ihrem Workflow? Was ist deine Lieblings-CSS-Funktion? Lass es uns in den Kommentaren wissen!
