Verwendung von CSS-Preprozessoren mit WordPress - Was sind sie?

Ich arbeite seit drei Jahren mit WordPress, aber erst vor einem Jahr wurde ich mit der Entwicklung von WordPress ernst. Im Speziellen bin ich leidenschaftlich mit der Thematisierung von Kindern beschäftigt und verbringe viel Zeit mit der Entwicklung von Themen.

In den letzten Jahren sind CSS-Präprozessoren auf dem Vormarsch - vor allem Werkzeuge, die das Schreiben von Stylesheets erleichtern und die Wartung erleichtern.

In dieser Serie schauen wir uns an, was Präprozessoren sind, welche populär sind und wie wir sie in unsere Themenentwicklung integrieren können.

Wohin gehen wir?

Wenn es um die Entwicklung von Benutzeroberflächen geht, geht es nicht nur darum, wie man die Dinge gut aussehen lässt, sondern auch, dass die Dinge gut strukturiert und so performant wie möglich gestaltet werden. Ich glaube, dass dies in unseren WordPress-Projekten etwas sein sollte , auch.

In dieser Serie möchte ich ein wenig Hintergrundwissen zu den Präprozessoren geben und einige der wichtigsten Akteure im Raum hervorheben. Ich werde auch über einige der beliebtesten Frameworks sprechen. Dann werde ich mich eingehender mit LESS beschäftigen und erklären, warum ich es am liebsten benutze. Zum Schluss werde ich darauf eingehen, wie Sie es mit CodeKit verwenden können, um Ihr CSS für Ihr Design zu erstellen.

Über CSS-Preprozessoren

Wie bereits erwähnt, gibt es eine Reihe von CSS-Präprozessoren, am häufigsten werden LESS und SASS verwendet. Beide sind syntaktisch ähnlich und können die Geschwindigkeit, mit der Sie Ihr CSS schreiben können, erheblich steigern.

Es gibt einige Unterschiede wie ihre Compiler und Erweiterungen oder Frameworks, mit denen sie kombiniert werden können.

WENIGER

LESS ist eine dynamische Stylesheet-Sprache. Sie können Ihr CSS programmgesteuert in ein schreiben .Weniger Datei und kompilieren Sie Ihre Ausgabe in eine .css Datei. Die Übersetzungssprache für LESS ist JavaScript. Dies ist großartig, da Sie den Compiler auf der Serverseite oder auf der Clientseite ausführen können.

Einige der Funktionen von LESS sind:

Variablen - Variablen können definiert werden und werden in Ihrer Datei verwendet. Nehmen Sie eine Änderung an einer Stelle vor und sehen Sie, wo sie verwendet wird.
Mixins - Mixins enthalten eine Reihe von Eigenschaften aus einem Regelsatz in einen anderen Regelsatz. Sie können auch parametrische Mixins verwenden, die Argumente akzeptieren.
Verschachtelte Regeln - Verschachtelte Regeln geben Ihnen die Möglichkeit, Verschachtelung anstelle von oder in Kombination mit Kaskadierung zu verwenden.
Namespaces - Mit Namespaces können Sie Ihre Variablen oder Mixins zu organisatorischen Zwecken gruppieren oder einfach eine Verkapselung anbieten.

Auf die Syntax für diese werde ich im nächsten Beitrag dieser Serie näher eingehen.

Zwei der beliebtesten Front-End-Frameworks, die LESS verwenden, sind:

Bootstrap
Rahmenlos

SASS

SASS ist eine Erweiterung von CSS3. Es hat zwei Syntaxen: .scss und .sass. .SCSS ist die am häufigsten verwendete Syntax, unterstützt aber auch die ältere eingerückte Syntax.

Zu den Funktionen von SASS gehören:

Variablen - Variablen können definiert werden und werden in Ihrer Datei verwendet. Nehmen Sie eine Änderung an einer Stelle vor und sehen Sie, wo sie wie LESS verwendet wird.
Mixins - Mit Mixins können Sie ganze CSS-Blöcke, Eigenschaften oder Selektoren wie LESS wiederverwenden
Verschachtelung - Vermeiden Sie Wiederholungen, indem Sie Selektoren wie LESS ineinander verschachteln
Vererbung von Selektoren - Hiermit kann ein Selektor angewiesen werden, alle Stile eines anderen zu erben, ohne die CSS-Eigenschaften zu duplizieren. Nicht in WENIGER verfügbar.

Hier sind ein paar Frameworks, die SASS und SCSS enthalten:

Stiftung
Schwere
Rahmenlos

Fazit

CSS-Preprozessoren sind definitiv ein wachsender Trend im Webdesign. Sie können die Zeit, die Sie für das Schreiben von Stilen für Ihre Websites aufwenden, erheblich beschleunigen.

Sie können auch bei der Strukturierung Ihres CSS helfen, als würden Sie Funktionen in anderen Sprachen wie PHP oder JavaScript ausführen. Wenn Sie in Ihrem Webprojekt noch keine CSS-Präprozessoren verwenden, sollten Sie dies unbedingt in Betracht ziehen.

Nun, da wir uns zwei der populäreren Präprozessoren angesehen haben, werde ich mich mit LESS genauer beschäftigen und einige Gründe nennen, warum ich es persönlich im nächsten Post verwenden möchte. Ich werde Ihnen auch zeigen, wie Sie CodeKit in Ihren WordPress-Projekten einsetzen können.

Ressourcen

WENIGER
SASS

Code