Bisher haben wir PostCSS verwendet, um beispielsweise Stylesheets zu optimieren, Funktionen für die Vorverarbeitung hinzuzufügen und bestimmte Klassennamenkonventionen zu generieren. Wie kann es jedoch dabei helfen, einfaches altes CSS zu schreiben??
Es gibt so viele kleine Codeteile, die ein durchschnittlicher Webdesigner im Laufe seiner Karriere tausende Male ausgibt, und wenn Sie nur ein wenig Zeit für sich gewinnen können, ergibt das am Ende eine Menge.
In diesem Lernprogramm werden wir PostCSS verwenden, um die tägliche Codeeingabezeit durch eine Reihe von Abkürzungen und Abkürzungen zu reduzieren. Lass uns anfangen!
Richten Sie Ihr Projekt ein
Sie sind mit diesem Vorgang inzwischen vertraut, aber als Erstes müssen Sie Ihr Projekt für Gulp oder Grunt einrichten. Wenn Sie für das eine oder das andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um die gleichen Ziele zu erreichen, so dass Sie mit dem Arbeiten ein bisschen einfacher sein sollten.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
PostCSS Quickstart Guide: Gulp Setup oder
PostCSS-Schnellstartanleitung: Grunt-Setup
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Installiere Plugins
Für dieses Tutorial werden mehrere Plugins installiert, von denen jedes eine andere Art von Abkürzung oder Abkürzung verwendet.
Unabhängig davon, ob Sie Gulp oder Grunt verwenden, führen Sie den folgenden Befehl in Ihrem Projektordner aus, um die verwendeten Plugins zu installieren:
Wenn Sie Gulp verwenden, fügen Sie diese Variablen unter den bereits in der Datei vorhandenen Variablen hinzu:
var alias = required ('postcss-alias'); var crip = required ('postcss-crip'); var magician = erfordern ('postcss-font-magician'); var triangle = required ('postcss-triangle'); var circle = erfordern ('postcss-circle'); var linkColors = required ('postcss-all-link-colors'); var center = requir ('postcss-center'); var clearfix = required ('postcss-clearfix'); var position = required ('postcss-position'); var size = requir ('postcss-size'); var verthorz = erfordern ('postcss-verthorz'); var colorShort = required ('postcss-color-short');
Fügen Sie nun jeden dieser neuen Variablennamen in Ihre hinzu Prozessoren Array:
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Plugins über Grunt laden
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen grunzen postcss Vergewissern Sie sich, dass eine neue Datei „style.css“ im Ordner „dest“ Ihres Projekts angezeigt wurde.
Okay, jetzt sind alle Plugins installiert. Lerne, wie man sie für CSS-Abkürzungen und Abkürzungen verwendet.
Verwenden Sie die Abkürzung für Eigenschaften
Es gibt viele Eigenschaften, die wir immer wieder eingeben müssen und über wieder in CSS. Sicher, die Zeit, die benötigt wird, um eine Handvoll Charaktere einzutippen, ist zwar sehr klein, aber im Laufe der Jahre wird das alles. Wir werden uns hier zwei Plugins ansehen, mit denen Sie diese Eigenschaften auf die Kurzversion reduzieren können, damit Sie einen schnellen und reibungslosen Ablauf erhalten, während Sie Ihr CSS ausarbeiten.
Definieren Sie Ihre eigene Abkürzung
Mit dem Postcss-Alias-Plugin von Sean King können Sie Ihre eigenen Abkürzungen oder "Aliasnamen" für alle Eigenschaften definieren, die Sie abkürzen möchten. Auf diese Weise können Sie sicherstellen, dass die von Ihnen verwendete Abkürzung zu der Funktionsweise Ihres Verstandes passt und daher für Sie leicht zu merken ist.
Um einige Aliase zu definieren, fügen Sie oben in Ihrem Stylesheet eine At-Regel mit der Syntax hinzu @alias … . Dann fügen Sie in der Regel die Aliase durch Hinzufügen hinzu Aliasname: Eigenschaftenname;.
Fügen Sie der Datei "src / style.css" das folgende Beispiel hinzu, das Aliasnamen für die Rahmengrösse, Grenzstil und Randfarbe Eigenschaften:
Weitere Informationen zum Postcss-Alias finden Sie unter: https://github.com/seaneking/postcss-alias
Plug & Play-Kurzschrift
Wenn Sie viele Abkürzungen für Immobilien verwenden möchten, die einzelnen Schritte jedoch nicht selbst definieren möchten, können Sie das Plugin postcss-crip von Johnie Hjelm mit Hunderten von Abkürzungen für das Plugin und Spiel verwenden.
Fügen Sie der Datei "src / style.css" den folgenden Code hinzu, der die Abkürzung für die Rand oben, Rand rechts, Rand unten und Rand links Eigenschaften:
Weitere Informationen zu postcss-crip finden Sie unter: https://github.com/johnie/postcss-crip
Die vollständige Liste der Abkürzungen für Immobilien finden Sie unter: https://github.com/johnie/crip-css-properties
@ Font-face in einer Zeile ausgeben
Das Postcss-Font-Magician-Plugin von Jonathan Neal macht seinem Namen alle Ehre. Es ermöglicht Ihnen die Verwendung benutzerdefinierter Schriftarten über eine einfache Schriftfamilie Wenn Sie eine Standardschriftart verwenden, funktioniert die Schriftart einfach magisch.
Fügen Sie der Datei "src / style.css" den folgenden Code hinzu:
body font-family: "Indie Flower";
Das ist es. Das ist alles, was Sie brauchen, um Postcss-Font-Magier einzusetzen. Keine spezielle Syntax, verwenden Sie einfach den Namen der Schriftart wie jede andere.
In diesem Fall habe ich die Indie Flower-Schriftart aus der Google Fonts-Bibliothek ausgewählt. Ich habe meinem Projekt keine benutzerdefinierten Zeichensatzdateien hinzugefügt. Daher wird das Plugin das sehen und prüfen, ob meine angegebene Schriftart in Google Fonts verfügbar ist. Wenn es feststellt, dass es verfügbar ist, wird das entsprechende Element erstellt @Schriftart Code völlig automatisch.
Kompilieren Sie Ihre Datei und schauen Sie sich Ihre Datei „dest / style.css“ an, in der Sie sehen, dass dieser Code hinzugefügt wurde:
Sie können das ordnungsgemäße Laden der Schrift überprüfen, indem Sie in Ihrem Zielordner "index.html" eine neue Datei erstellen und diesen Code hinzufügen:
Überschrift testen
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Pellentesque Pretium bibendum nisl. Mauris eget orci eget nisi tristique lobortis. Pellentesque rutrum id ligula quis tempus. Vivamus tempus, justo bei semper volutpat, lorem justo tincidunt urna, in mattis lorem dolor condimentum diam. Ut Dapibus Nunc Auctor Felis Viverra posuere. Aenean efficitur efficitur nisi. Vivamus leo felis, semper quis rutrum eu, eleifend eu quam.
Damit die Schriftarten geladen werden können, müssen Sie diese Datei über ein anzeigen http: // Adresse statt einer Datei:// Laden Sie die Datei entweder auf einen Webhost hoch oder erstellen Sie eine Live-Vorschau mit einer App wie Prepros.
Sie sollten die Indie-Flower-Schrift auf Ihren gesamten Text anwenden, z.
Lesen Sie mehr über Postcss-Font-Magier hier: https://github.com/jonathantneal/postcss-font-magician
Erstellen Sie CSS-Shapes
Wenn Sie jemals reines CSS zum Erstellen von Formen verwendet haben, wissen Sie, dass dies eine großartige Möglichkeit sein kann, Dinge wie Kreise und Dreiecke in Ihre Designs einzubeziehen, aber es kann auch ziemlich schwierig sein. Insbesondere bei Dreiecken kann es etwas kontrapunktisch sein, herauszufinden, welchen Code Sie benötigen, um eine Form mit der richtigen Größe in die richtige Richtung zu bekommen.
Hier kommen die Postcss-Circle- und Postcss-Dreieck-Plugins von Jed Mao zur Rettung. Beide Plugins erstellen eine vereinfachte Syntax und eine intuitive Methode zum Erstellen von Kreisen und Dreiecken mit reinem CSS.
Einen Kreis hinzufügen
Verwenden Sie zum Erstellen eines Kreises die Syntax Kreis: Größe Farbe;. Fügen Sie der Datei "src / style.css" den folgenden Code hinzu:
.circle circle: 8rem # c00;
Kompilieren Sie es und Sie sehen den folgenden Code in Ihrer Datei "dest / style.css":
Fügen Sie nun diesen HTML-Code der Datei "dest / index.html" hinzu, die Sie im letzten Abschnitt erstellt haben:
Sehen Sie sich Ihre Datei in einem Browser neu an und Sie sollten jetzt einen roten Kreis sehen:
Weitere Informationen zum Postcss-Circle finden Sie unter: https://github.com/jedmao/postcss-circle
Dreieck hinzufügen
Es gibt drei Arten von Dreiecken, die Sie mit diesem Plugin hinzufügen können. gleichschenklig, gleichschenklig und gleichseitig. Jede hat etwas unterschiedliche Syntaxsätze, die Sie im Github-Repo des Plugins nachlesen können.
Wir werden ein gleichschenkliges Dreieck hinzufügen, dessen Syntax lautet:
Um das Dreieck in Ihrer Datei "dest / index.html" zu sehen, fügen Sie dieses HTML hinzu:
Beim Aktualisieren dieser Datei in Ihrem Browser sollten Sie jetzt ein rotes gleichschenkliges Dreieck sehen, das nach rechts zeigt:
Weitere Informationen zum Postcss-Dreieck finden Sie unter: https://github.com/jedmao/postcss-triangle
Verwenden Sie Tastenkombinationen für allgemeine Aufgaben
Link-Styling einstellen
Das Festlegen von Farben für Verknüpfungen ist eine Aufgabe, die in jedem Projekt ausgeführt werden muss, und erfordert die Einstellung von Stilen für Standardverknüpfungen sowie vier verschiedene Verknüpfungsstatus. Mit dem Postcss-All-Link-Colors-Plugin von Jed Mao können Sie diesen Vorgang verkürzen und die Farben für alle Links gleichzeitig ausgeben.
Fügen Sie Ihrer "src / style.css" Folgendes hinzu:
a @ link-colors alle # 4D9ACC;
Dann kompilieren Sie Ihre Datei und Sie sehen, dass alle erforderlichen Verbindungsstatus gesetzt wurden:
a color: # 4D9ACC; a: besuchte color: # 4D9ACC; a: focus color: # 4D9ACC; a: hover color: # 4D9ACC; a: aktiv color: # 4D9ACC;
Sie haben auch die Möglichkeit, für einen bestimmten Zustand eine andere Farbe zu generieren. Fügen Sie am Ende der Regel einige geschweifte Klammern hinzu und verwenden Sie darin die Syntax Zustand: Farbe;.
Aktualisieren Sie den Code, den Sie gerade zu Ihrer Datei "src / style.css" hinzugefügt haben, wie folgt:
a @ link-colors all # 4D9ACC hover: # 5BB8F4;
Wenn Sie nun kompilieren, sehen Sie, dass der Hover-Status eine andere Farbe hat als die übrigen Stile:
a color: # 4D9ACC a: besuchte color: # 4D9ACC; a: focus color: # 4D9ACC; a: hover color: # 5BB8F4; a: aktiv color: # 4D9ACC;
Weitere Informationen zu Postcss-All-Link-Farben finden Sie unter: https://github.com/jedmao/postcss-all-link-colors
Vertikal oder horizontal zentrieren
Zentrieren, entweder vertikal oder horizontal, ist eine der Aufgaben, die den CSS-Entwicklern immer in die Quere kommt. Mit dem Postcss-Center-Plugin von Jed Mao wird die Aufgabe mit der Einführung von oben in der Mitte; zur vertikalen Zentrierung und links: Mitte; zur horizontalen Zentrierung.
Fügen Sie diesen Code zu Ihrer Datei "src / style.css" hinzu:
.zentriert oben: Mitte; links: Mitte;
Dann kompilieren Sie es und Sie sehen den folgenden Code:
Hinweis: Die Zentrierung verwendet die absolute Positionierung. Sie müssen also die zentrierten Elemente mit einem übergeordneten Element verbinden, das eine relative, absolute oder feste Positionierung verwendet. Da absolut positionierte Elemente sich nicht auf die Höhe oder Breite der übergeordneten Elemente auswirken, müssen Sie auch die Höhe und Breite des übergeordneten Elements anpassen.
Zum Beispiel add links: Mitte; zum .Kreis Klasse, die Sie zuvor erstellt haben, damit sie horizontal zentriert ist:
.circle circle: 8rem # c00; links: Mitte;
Fügen Sie dann diese zweite Klasse hinzu, die als Umhüllung um den Kreis fungiert und ihm eine relative Position und eine dem Kreis entsprechende Höhe gibt:
.circle_wrap position: relativ; Höhe: 8rem;
Fügen Sie nun ein Element mit dieser Klasse als Wrapper um Ihre vorhandene Circle-HTML-Datei hinzu:
Wenn Sie zurückkehren und Ihre Seite aktualisieren, sollte Ihr Kreis horizontal zentriert sein:
Weitere Informationen zum Postcss-Center finden Sie unter: https://github.com/jedmao/postcss-center
Clearfix in einer Zeile ausgeben
In jedem Design, das Floats enthält, ist das Erstellen einer Clearfix-Klasse so praktisch, dass es einfach unverzichtbar ist. Das Postcss-Clearfix-Plugin von Sean King macht das Erstellen dieses Clearfix-Designs zu einem einzeiligen Job, indem es hinzugefügt wird Fix als möglicher Wert, der mit der verwendet werden kann klar Eigentum.
Um ein Problem zu beheben, das auf IE8 + funktioniert, fügen Sie der Datei "src / style.css" Folgendes hinzu:
.clearfixed clear: fix;
Beim Kompilieren werden Sie feststellen, dass der folgende Clearfix-Code erstellt wurde:
.clearfixed: after content: "; display: table; clear: both;
Wenn Sie einen Clearfix benötigen, der für IE6 + geeignet ist, verwenden Sie den Wert Fix-Erbe statt einfach Fix, wie so:
.clearfixed_legacy clear: fix-legacy;
Wenn dieser Code kompiliert wird, werden Sie feststellen, dass er ein paar zusätzliche Inhalte enthält, die ihn für ältere Browser benutzerfreundlich machen:
.clearfixed_legacy: before, .clearfixed_legacy: after content: "; display: table; .clearfixed_legacy: after clear: both; .clearfixed_legacy zoom: 1;
Weitere Informationen zu postcss-clearfix finden Sie unter: https://github.com/seaneking/postcss-clearfix
Positionieren in einer Zeile
Wenn Sie eine nicht standardmäßige Positionierung verwenden möchten, d. H. absolut, Fest oder relativ, Sie müssen die Werte für das Element eingeben oben, Recht, Unterseite und links manuell positionieren. Es gibt keine Abkürzung, die Sie beim Festlegen von Rändern oder Auffüllen in einer Zeile verwenden könnten. Das heißt, bis Sie das Postcss-Position-Plugin von Sean King installiert haben.
Mit diesem Plugin bei der Verwendung von Position Eigenschaft, nachdem Sie einen Wert von gesetzt haben absolut / Fest / relativ, Sie können es erklären oben, Recht, Unterseite und links Werte in derselben Zeile.
Fügen Sie der Datei "src / style.css" den folgenden Beispielcode hinzu:
.absolute position: absolute 1rem 1rem 0 0;
Nach dem Kompilieren sehen Sie, dass die Kurzschrift in die separaten Zeilen kompiliert wurde, die Sie normalerweise manuell eingeben müssten.
Die Deklaration dieser Werte erfolgt nach demselben Muster wie in Spanne oder Polsterung Kurzform, d. h. Sie können auch oben und unten den ersten Wert festlegen, dann rechts und links den zweiten, oder Sie können einen Wert für alle vier Werte festlegen.
Weitere Informationen zur Postcss-Position finden Sie unter: https://github.com/seaneking/postcss-position
Stellen Sie Breite und Höhe gleichzeitig ein
Das Postcss-große Plugin von Andrey Sitnik ermöglicht es Ihnen, das häufig verwendete zu komprimieren Breite und Höhe Eigenschaften in ein einzelnes Größe Eigentum. Sie können es auf zwei Arten verwenden: Übergeben von zwei Werten, wobei der erste Wert die Breite und der zweite die Höhe angibt, oder einen Wert, der sowohl für die Breite als auch für die Höhe verwendet wird.
Testen Sie dies, indem Sie Ihrer "src / style.css" -Datei folgendes CSS hinzufügen:
.size_a size: 1rem 2rem; .size_b size: 1rem;
Bei der Kompilierung sollten Sie diesen Code jetzt in Ihrer Datei "dest / style.css" sehen:
Weitere Informationen zur Postcss-Größe finden Sie unter: https://github.com/postcss/postcss-size
Legen Sie den vertikalen und horizontalen Abstand fest
Als großer Liebhaber effizienter Kodierung habe ich mir beim Ausschreiben von Rändern und Polsterungen, die auf zwei Seiten oft gleich sind, häufig gewünscht, dass es eine Abkürzung gibt, um den vertikalen und horizontalen Abstand auf einmal anzugeben. Ich habe sogar ein paar Pre-Prozessor-Mixins geschrieben, um genau das zu tun. Diese Mixins brauche ich dank des Postcss-Verthorz-Plugins von David Hemphill nicht mehr.
Mit diesem Plugin können Sie verwenden Polster-Vert oder margin-vert um den vertikalen Abstand einzustellen, und Polsterung-Horz oder Marge-Horz horizontalen Abstand einstellen. Fügen Sie der Datei "src / style.css" den folgenden Beispielcode hinzu, um die Funktionsweise zu überprüfen:
.Abstand padding-vert: 1rem; margin-horz: 2rem;
Nach dem Kompilieren werden Sie sehen, dass diese Regeln zu vollständigen Auffüll- und Randdeklarationen erweitert wurden.
Sie können diese Eigenschaften auch noch weiter abkürzen, indem Sie sie mit zwei Buchstaben abkürzen. Der oben verwendete Beispielcode könnte wie folgt abgekürzt werden und die Ausgabe wäre exakt gleich:
.spacing_short pv: 1rem; mh: 2rem;
Weitere Informationen zu postcss-verthorz finden Sie unter: https://github.com/davidhemphill/postcss-verthorz
Farbcodes ausgeben
Meine bevorzugte Standardtextfarbe ist # 232323 und ich weiß nicht, ob es nur ich ist, aber ich werde es müde, immer wieder diese beiden Ziffern herauszuholen. Ich wünschte mir oft, es gäbe eine Abkürzung, ähnlich wie man es schneiden kann #ffffff bis zu #F f f. Mit dem Postcss-Color-Short-Plugin von Andrey Polischuk gibt es das.
Wenn Sie bei Verwendung dieses Plugins einen zweistelligen Farbcode einstellen, werden diese Ziffern wiederholt, bis ein sechsstelliger Code erstellt wird, z. # 23 wird werden # 232323. Wenn Sie einen einstelligen Farbcode einstellen, wird er wiederholt, bis es drei Ziffern gibt, z. #f wird werden #F f f. Sie können es sogar zum Einstellen verwenden rgba () Farben, wobei die erste Ziffer, die Sie übergeben, dreimal wiederholt wird und die zweite als Alpha-Wert verwendet wird, z. rgba (0, 0,5) wird werden rgba (0, 0, 0, 0,5).
Fügen Sie der Datei "src / style.css" Folgendes hinzu, um alle oben genannten Möglichkeiten auszuprobieren:
Weitere Informationen zu postcss-color-short finden Sie unter: https://github.com/andrepolischuk/postcss-color-short
Zusammenfassen
Lassen Sie uns alles, was in diesem Tutorial vorbei war, kurz zusammenfassen:
Kleine tägliche Codieraufgaben scheinen nicht viel zu sein, aber insgesamt sind sie insgesamt sehr zeitaufwändig
Mit dem Postcss-Alias-Plugin können Sie Ihre eigene Abkürzung für Eigenschaften erstellen
Das Postcss-Crip-Plugin verfügt über Hunderte vordefinierter Abkürzungen für Eigenschaften
Mit dem Postcss-Font-Magician können Sie benutzerdefinierte Schriftarten verwenden, als wären sie Standardschriftarten, die automatisch generiert werden @Schriftart Code für Sie
Mit den Postcss-Circle- und Postcss-Dreieck-Plugins lassen sich CSS-Kreise und -Dreiecke einfach und intuitiv erstellen
Mit dem Postcss-All-Link-Colors-Plugin können Sie Farben für alle Verbindungsstatus auf einmal ausgeben
Das Postcss-Center-Plugin ermöglicht die vertikale und horizontale Zentrierung mit oben in der Mitte; und links: Mitte;
Mit dem Plugin postcss-clearfix können Sie Clearfix-Code mit ausgeben klar: fix;
Mit dem Postcss-Position-Plugin können Sie Ihr hinzufügen oben, Recht, Unterseite und links Einstellungen als Teil Ihrer Verwendung des Position Eigentum
Mit dem Postcss-Plugin können Sie Breite und Höhe gleichzeitig einstellen
Das Postcss-Verthorz-Plugin ermöglicht die Ausgabe von horizontalen Abständen und vertikalen Abständen mit einzelnen Regeln.
Mit dem Postcss-Color-Short-Plugin können Sie ein- und zweistellige Hexcodes und andere Farbverknüpfungen verwenden.
Im nächsten Tutorial
Im nächsten Tutorial gehen wir auf Plugins über, die großartig sind, aber einfach nicht in eine bestimmte Kategorie fallen. Wir sehen uns bald in "Miscellaneous Goodies".
Share
Accentsconagua
