Share
Willkommen beim "PostCSS Deep Dive: QuickStart Guide". In diesen ersten Posts unserer Serie werden wir versuchen, Ihnen den schnellsten und effizientesten Einstieg in PostCSS zu ermöglichen.
In diesem Lernprogramm beginnen wir mit Soforteinstellungsoptionen, sodass Sie in wenigen Minuten mit PostCSS arbeiten können. Momentan haben wir zwei sofortige Setup-Optionen: CodePen und Prepros.
Mal sehen, wie Sie beide verwenden können, um sofort mit PostCSS zu spielen.
Wenn Sie PostCSS noch nicht kennen, können Sie es am schnellsten über CodePen verwenden.
CodePen bietet jetzt vorintegrierte Unterstützung für PostCSS sowie die folgenden Plugins und Packs:
Diese Auswahl an Plugins bietet Unterstützung für zukünftige Syntax, Sass-ähnliche Funktionen, das Entfernen von Kommentaren und die Möglichkeit, Transformationscode in Kurzform zu schreiben.
Beginnen Sie, indem Sie zu CodePen gehen und einen neuen Stift erstellen. Klicken Sie dann auf das kleine Zahnradsymbol oben links im CSS-Fenster, um das Einstellungsfeld aufzurufen.
Aus der Dropdownliste beschriftet CSS-Präprozessor wähle aus PostCSS Möglichkeit. Sie können auch das mit gekennzeichnete Optionsfeld überprüfen Autoprefixer das Plugin enthalten.
Nachdem Sie diese Auswahl getroffen haben, sollte jetzt eine kleine schwarze Schaltfläche unterhalb der Dropdown-Liste angezeigt werden Benötigen Sie ein Add-On??. Klicken Sie auf diese Schaltfläche, um ein Fenster mit einer Liste von zu öffnen @ Regeln. Kopieren Sie diese und fügen Sie sie ein @ Regeln in Ihrem CSS-Bedienfeld, um das entsprechende PostCSS-Plugin zu verwenden.
Sehen wir uns ein Beispiel dafür an, wie wir die verfügbaren PostCSS-Plugins mit CodePen verwenden können, beginnend mit dem cssnext Pack.
Fügen Sie oben im CSS-Bedienfeld diesen Code hinzu, um anzugeben, dass Sie cssnext verwenden möchten:
@use cssnext;
Mit dieser Zeile können Sie nun alle unter http://cssnext.io/features beschriebenen Funktionen nutzen. Wir werden die CSS-Variablen- und Farbfunktionen verwenden, um eine Farbe auf dem Körperhintergrund festzulegen.
Zuerst richten wir ein :Wurzel Abschnitt und definieren Sie eine CSS-Variable. Fügen Sie dies Ihrem CSS-Panel hinzu:
: root --body_bg_color: schwarz;
Jetzt können wir diese Variable in unserem CSS verwenden, indem Sie den folgenden Code hinzufügen:
body background: var (- body_bg_color);
Zu diesem Zeitpunkt sollten Sie gerade gesehen haben, wie der Hintergrund Ihres Stiftes schwarz wurde. Sie können auch auf klicken Kompiliert anzeigen Schaltfläche oben im CSS-Bedienfeld, um den generierten Code anzuzeigen:
„View Compiled“ zeigt den Code nach der Verarbeitung mit PostCSSNehmen wir an, wir finden das harte Schwarz für ein Design, an dem wir arbeiten, etwas zu stark und wir möchten es etwas aufhellen. Um die Farbe anzupassen, können wir das verwenden zukünftige Syntax das erlaubt Farbänderung.
In der Zeile, die den --body_bg_color Variable, ändern Sie den Wert von schwarz zu:
--body_bg_color: color (schwarze Helligkeit (20%));
Diese Farbfunktion hellt die schwarze Farbe um 20% auf. Sie sollten jetzt sehen, dass der Hintergrund Ihres Stiftes dunkelgrau ist.
Jedes der unterstützten Plugins kann auf dieselbe Weise in CodePen verwendet werden:
Accentsconagua
@ Regel für das Plugin, das Sie verwenden möchtenHier ist die (visuell unauffällige) Demo, die wir gerade gebaut haben:
Prepros verfügen möglicherweise nicht über die Unterstützung für Plugins, die CodePen unterstützt, aber beide können nahtlos aktiviert werden Autoprefixer und cssnext. Prepros können von https://prepros.io heruntergeladen werden.
Ziehen Sie zunächst ein Projekt, das eine CSS-Datei enthält, per Drag & Drop in die Benutzeroberfläche. Klicken Sie anschließend auf den Namen der CSS-Datei, um auf der rechten Seite ein Fenster mit Einstellungen zu öffnen. Von hier aus können Sie die markierten Kästchen markieren AutoPrefix-CSS um Autoprefixer zu aktivieren, und Aktivieren Sie Cssnext um cssnext zu verwenden:
Sie können jetzt alle Funktionen des cssnext-Plugin-Pakets nutzen und Ihr CSS automatisch korrigieren lassen.
Okay, lassen Sie uns kurz zusammenfassen, was wir oben beschrieben haben:
@ Regeln, um bestimmte Plugins zu aktivierenCodePen und Prepros sind zwei großartige Möglichkeiten, PostCSS fast sofort einzurichten. Der Nachteil ist jedoch, dass Sie nicht entscheiden können, welche Plugins verwendet werden sollen.
Wenn Sie bereit sind, die volle Leistungsfähigkeit von PostCSS zu nutzen, sollten Sie Ihre eigene Auswahl an Plugins auswählen und konfigurieren. Möglicherweise ist dies am einfachsten, wenn Sie benutzerdefinierte PostCSS-Projekte über Task-Läufer wie Gulp oder Grunt einrichten.
In den nächsten beiden Lernprogrammen, "Schnellstartanleitung: Gulp-Setup" und "Schnellstartanleitung: Grunt-Setup", erfahren Sie, wie Sie dies tun können..
