Share
Im ersten Teil dieser Serie habe ich einen kurzen Überblick über die beliebten CSS-Präprozessoren LESS und SASS gegeben. Ich habe auch einige der Frameworks mitgeteilt, in denen sie verwendet werden.
Ich plane, tiefer in LESS einzutauchen und über die Teile der Sprache zu sprechen, die ich am häufigsten benutze. Ich möchte Ihnen auch zeigen, wie Sie CodeKit einsetzen können.
Lass uns reinschauen!
Ich persönlich benutze LESS für die meisten WordPress-Projekte. Ich arbeite viel mit Standard und es wird Bootstrap als Framework der Wahl verwendet.
Da Bootstrap LESS zum Kompilieren von CSS verwendet, habe ich gelernt, wie man es benutzt .Weniger Dateien, um Änderungen vorzunehmen. Ich kenne andere Webdesigner und -entwickler, die Foundation bevorzugen. Seitdem Foundation SASS verwendet, haben sie gelernt, dies zu verwenden.
Ich persönlich fange an, an einem anderen Webprojekt zu arbeiten, das SASS verwendet, und es war aufgrund meiner Erfahrung mit LESS relativ einfach, die Dinge zu ermitteln.
Variablen sind ziemlich selbsterklärend. Sie können eine Variable irgendwo in Ihrem erstellen .Weniger Datei und verweisen Sie dann an anderen Stellen in dieser Datei oder anderen Dateien darauf. Ich neige dazu, es für Farben, Schriftarten, Füllungen und Ränder zu verwenden.
Hier ist ein Beispiel:
// Variablen @red: # ff0000; @ green: # 00ff00; @blau: # 0000ff; // Styling // Verknüpft eine color: @blue; a: besuchte color: @blue;
Das wird dann dazu kompilieren:
a color: # 0000ff; a: besuchte color: # 0000ff;
Wenn Sie die Farbe beider Linkstile ändern möchten, müssen Sie nur die Variable ändern:
@Blau
von
# 0000ff
zu
# 0000a4
Sie ändern sich an einer Stelle, kompilieren neu und Sie haben alle Instanzen dieser Variablen in der gesamten Datei geändert.
Eine weitere gute Möglichkeit, diese Variablen zu verwenden, wäre die Verwendung semantischer Benennungen wie:
@Primärfarbe
und
@sekundäre Farbe
Sie können diese Variablen dann im gesamten Code verwenden. Wenn Ihr Designer diese Farben hat, können Sie sie einfach einmal ändern, neu kompilieren und fertig!
Verschachtelung wird genauso verwendet, wie Sie eine Logik in einer verschachteln würden ansonsten Blockieren in PHP oder JavaScript: Sie setzen Ihren höheren Selektor wie .Post, Platzieren Sie dann die anderen Selektoren darin. Dadurch entfällt die Notwendigkeit, mehrmals zu tippen .Post vor Ihren anderen Selektoren wie folgt:
// Post .post padding: 20px; .post-header margin: 20px 0;
Das wird dann dazu kompilieren:
.post padding: 20px; .post .post-header margin: 20px 0;
Sie können auch verwenden & Selektoren zu verketten. Ein Beispiel könnte sein, wenn Sie bestimmte Widgets in Ihrer Seitenleiste anvisieren möchten. Angenommen, Sie wollten die Hintergrundfarbe der Widgets "Letzte Beiträge" und "Letzte Kommentare" anders gestalten. In WENIGER können Sie Folgendes tun:
.Widget padding: 20px; & .widget_recent_entries Hintergrundfarbe: weiß; & .widget_recent_comments Hintergrundfarbe: schwarz;
Das würde dazu beitragen:
.Widget padding: 20px; .widget.widget_recent_entries Hintergrundfarbe: weiß; .widget.widget_recent_comments Hintergrundfarbe: schwarz;
Sie können dies auch für Pseudoklassen wie verwenden :schweben, :aktiv, :hat besucht, :Vor, und :nach dem.
// Links eine Farbe: Blau; &: hover farbe: rot; &: besuchte color: red;
Das würde sich dazu kompilieren:
eine Farbe: blau; a: hover Farbe: Rot; a: besuchte color: red;
Mixins sind im Wesentlichen eine Reihe von Stilattributen, die Sie zusammenfassen möchten. Ein gutes Beispiel hierfür sind Attribute, die sich in Browsern wie der Grenzradius unterscheiden.
Anstatt sich an jeden zu erinnern, können Sie Ihr Mixin aufrufen und es wird jedes Attribut für Sie bereitstellen. Hier ist ein Beispiel:
// Mixin .border-radius border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; // Widget .widget .border-radius;
Das wird folgendes kompilieren:
.Widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
Was ist, wenn Sie den Grenzradius in Ihrem System mehrfach verwenden möchten? .Weniger Datei, aber unterschiedliche Beträge für jeden? Dann würden Sie ein parametrisches Mixin verwenden.
Dies bedeutet einfach, dass Sie ein Mixin wiederverwenden und ihm ein Argument übergeben können. Hier ist ein Beispiel:
// Mixin .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widget .widget .border-radius (); // Post .post .border-radius (8px);
Das würde sich dazu kompilieren:
.Widget border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .post border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px;
Hier ein Beispiel für die gleichzeitige Verwendung von Variablen, Verschachtelungen und Mixins:
// Variablen @ Widget-Recent-Posts-border-radius: 4px; @ Widget-Recent-Posts-Hintergrundfarbe: Weiß; @ Widget-Recent-Posts-Link-Farbe: @Blue; @ Widget-Recent-comments-border-radius: 8px; @ Widget-Recent-comments-background-color: schwarz; @ Widget-Recent-comments-link-color: @red; // Farben @blau: # 0000ff; @red: # ff0000; // Mixins .border-radius (@radius: 4px) border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; // Widgets .widget & .widget_recent_entries background-color: @ widget-recent-posts-background-color; .border-radius (@ widget-Recent-posts-border-radius); ul li a color: @ Widget-Recent-Posts-Link-Color; & .widget_recent_comments Hintergrundfarbe: @ Widget-Recent-comments-Hintergrundfarbe; .border-radius (@ widget-Recent-comments-border-radius); ul li a color: @ widget-Recent-comments-link-color;
Was würden alle dazu kompilieren:
.widget.wiget_recent_entries Hintergrundfarbe: weiß; Grenzradius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; .widget.widget_recent_entries ul li a color: # 0000ff; .widget.wiget_recent_comments Hintergrundfarbe: schwarz; Grenzradius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; .widget.widget_recent_entries ul li a color: # ff0000;
Es ist sehr einfach, Ihr CodeKit-Projekt einzurichten. Sie können Ihren Ordner einfach per Drag & Drop in CodeKit ziehen oder auf die Plus-Schaltfläche unten links klicken und dann einen Ordner im Dateibrowser auswählen.
Wenn Sie dies tun, scannt CodeKit automatisch alle Dateien in diesem Ordner und gruppiert sie anschließend in die folgenden Kategorien:
Sie haben jetzt Ihre Projektdateien importiert. Als nächstes werden wir den Ausgabepfad Ihres festlegen .Weniger Dateien. Ich würde vorschlagen, eine zu haben css Ordner und a Weniger Ordner darin. Sie sollten sicherstellen, dass sich alle Ihre Dateien darin befinden Weniger Ordner, um auf Ihre zu zeigen style.less Datei.
Sie möchten zur Ansicht "Styles" wechseln. Wir wollen die haben style.less Datei wird in das Stammverzeichnis Ihres Themes als kompiliert style.css. Dazu klicken Sie mit der rechten Maustaste auf die Schaltfläche style.less Datei und wählen Sie "Ausgabepfad einstellen… ". Dadurch wird ein Dateibrowser geöffnet.
Als Nächstes müssen Sie auf die Eingabe Ausgabedateiname und Erweiterungstext klicken. Sobald Sie dies tun, wird es automatisch ausgefüllt style.css für dich Wenn dies nicht der Fall ist, möchten Sie eintreten style.css. Zuletzt klicken Sie auf Wählen speichern.
Wir sind fast da! Als nächstes müssen wir eine Übersetzungseinstellung auswählen. Der Bildschirm für die Zusammenstellungseinstellungen wird angezeigt, wenn Sie auf klicken .Weniger Datei. Wir haben drei Ausgabestile:
Wählen Sie eine der obigen Optionen aus und klicken Sie auf "Kompilieren". Sie sollten eine Benachrichtigung erhalten, dass Ihr style.less Datei wurde kompiliert.
Wenn alle Ihre Syntax korrekt ist, wird das Kompilieren erfolgreich sein. Wenn es Fehler gibt, werden Sie auf den Bildschirm umgeschaltet Log anzeigen und geben Sie die Zeilennummer und die Erläuterung des Fehlers an.
Wenn alles korrekt kompiliert wird, sollten Sie in der Lage sein, Ihr zu öffnen style.css Datei und sehen die Ausgabe. Wie Sie Ihre bearbeiten .Weniger Dateien speichern und speichern, CodeKit kompiliert Ihre Dateien automatisch neu.
Hinweis: Stellen Sie sicher, dass Sie keine Änderungen an der vornehmen style.css Datei, denn sobald Sie Ihre neu kompilieren .Weniger Dateien werden Ihre Änderungen überschrieben.
Wir haben jetzt einen tieferen Einstieg in LESS unternommen und ein paar der beliebtesten Funktionen aufgeschlüsselt. Ich habe ein paar Gründe dafür genannt, warum ich persönlich LESS für meine WordPress-Projekte verwende und wie ich CodeKit zum Kompilieren meiner Dateien verwende.
Im nächsten Beitrag werde ich näher darauf eingehen, wie man.WenigerDateien und verbinden sie alle zusammen.
Accentsconagua