Share
Vor nicht allzu langer Zeit haben wir uns die Grundlagen von LESS angesehen. Obwohl dies eine solide Referenz für Anfänger ist, können Sie mit LESS noch viel mehr tun! Das Ziel dieses Tutorials ist es, das Wissen aus dem vorherigen Artikel zu erweitern und Ihnen einige praktische Tipps zu geben, wie Sie all die großartigen Dinge über LESS nutzen können.
Die Konzepte des vorherigen Artikels werden wesentlich sein, um dieses zu verstehen. Variablen, Mixins, Funktionen und die Verschachtelung in LESS sollten alle vertraut sein und Sie sollten zumindest einige Kenntnisse über LESS haben.
Hinweis: Es gibt eine ganze Menge subjektiver Ratschläge in diesem Artikel. Viele Dinge, die wir diskutieren werden, beziehen sich auf die Methodik im Gegensatz zu den Regeln und Vorschriften einer Sprache. Ich zeige Ihnen, wie ich Dateien organisiere und Mixins erstelle, aber es könnte andere, bessere Wege geben, Dinge zu tun. Wenn Sie der Meinung sind, dass Sie eine bessere Struktur verwenden, oder wenn Sie eigene Tipps und Tricks haben, können Sie die Kommentare gerne loslassen.
Das Organisieren Ihrer Dateien ist immer äußerst wichtig, auch für LESS. Normalerweise erstelle ich in meinem Hauptprojektverzeichnis einen Ordner "Styles", in dem alle für dieses Projekt erforderlichen Styles gespeichert werden. Was passiert also, wenn Sie für Ihr Projekt CSS-Dateien von mehreren Speicherorten einbinden müssen??
Der einfachste Weg, um Ihnen das Leben zu erleichtern, ist ein Tool wie Winless oder CodeKit. Mit diesen Tools können Sie verschiedene Dateien an verschiedenen Orten zusammenstellen. Auf diese Weise können Sie alle Style-Dateien an einem Ort aufbewahren, während Sie sie tatsächlich in verschiedenen Ordnern in Ihren Projekten kompilieren.
Wie Sie sehen, befindet sich in diesem WordPress-Projekt die hervorgehobene 'style.less'-Datei im Ordner' styles '. Da WordPress eine 'style.css'-Datei im Hauptverzeichnis benötigt, müssen wir sie dort kompilieren. CodeKit oder ein ähnliches Tool macht dies einfach, da Sie es nur einmal einrichten müssen und es bis zum Ende des Projekts vergessen können.
Ein weiteres Problem, das bei CSS-Dateien auftreten kann, ist der Umgang mit Dateien von Drittanbietern. Rastersysteme, Stile für JavaScript-Schieberegler, Zurücksetzen und mehr erfordern (manchmal mehrere) CSS-Dateien. Es gibt normalerweise zwei Methoden, um dies zu ermöglichen. Sie verknüpfen die Dateien entweder separat mit Ihrer Webseite oder Sie platzieren den gesamten Code in einer Datei und minimieren ihn zu Leistungszwecken. Mit einem LESS Compiler-Tool wird dies wieder einfacher!
Mit Importregeln können Sie alle Dateien in Ihr LESS-Stylesheet ziehen. Sie können auch weniger Dateien importieren und deren Regeln, Mixins und andere Elemente in allen nachfolgenden Dateien verwenden.
Hinweis: Diese Methode ist zwar nützlich, aber keine universelle Lösung. In einigen Fällen müssen Sie möglicherweise alle Dateien separat einschließen, in anderen Fällen empfiehlt es sich, alles in eine Datei aufzunehmen.
Das größte Problem bei CSS ist der extreme Mangel an Konsistenz in fast allen Projekten. Diese Situation beruht hauptsächlich auf der Natur der Sprache selbst, nicht unbedingt auf der Unfähigkeit des Programmierers. CSS ist eine sehr lockere und fehlerverzeihende Sprache, was bedeutet, dass die Konfiguration gegenüber Konventionen gefördert wird, während umgekehrt die Option vorzuziehen wäre. Außerdem ist CSS tendenziell noch mehr prozedural codiert als üblich, was bedeutet, dass globale Muster nicht immer so einfach wahrgenommen und implementiert werden, wie sie sein könnten.
Obwohl LESS kein Cureall ist, können Sie mit Tools wie Funktionen und Verschachtelung viel konsistenter sein. Sehen wir uns einige Beispiele an, bei denen Sie mit LESS-Werkzeugen eine bessere Konsistenz erreichen können.
.radius (@radius: 5px) -webkit-border-radius (@radius); -khtml-border-radius (@radius); -moz-border-radius (@radius); -ie-border-radius (@radius); -o-border-radius (@radius); Grenzradius (@radius);
Ohne LESS müssen Sie diese Regeln bei Bedarf kopieren. Viele Leute schreiben einfach, während sie gehen, es ist also wahrscheinlicher, dass Sie eines der Präfixe vergessen oder in einer anderen Reihenfolge schreiben. Während diese nicht Dealbreaker für Ihre Website wären, fügt jede kleine Unstimmigkeit Ihrem Code unnötiges Rauschen hinzu.
Durch die Verschachtelbarkeit von Regeln haben Sie auch die Möglichkeit, Ihrem Code eine Reihenfolge hinzuzufügen. Ich versuche und verwende so wenig divs und andere Containerelemente wie möglich und versuche, jedes Element so gezielt wie möglich anzugreifen
.Kommentarliste .com '.com-Datum' .com-Zeit Farbe: # 888;
Das erscheint zunächst etwas überflüssig und ich stimme zu, in gewissem Sinne ist es das auch. Es macht jedoch alles sehr klar.
Die Nützlichkeit dieses Effekts wird nur offensichtlich, wenn Sie es in einem größeren Projekt verwenden. Es folgt jedoch ein kurzer Ausschnitt, der zeigt, wie ein Kommentar ansprechend ist. Unterhalb einer bestimmten Breite wird der Zeitabschnitt des Kommentardatums ausgeblendet, um Platz zu sparen.
@media screen und (max-width: 600px) .commentlist .comment-container .comment-main .comment-header .comment-date .time display: none;
Ich stimme zu, dass dies schrecklich aussieht. Es wurde jedoch nicht daran gedacht, die Regel zu erstellen. Kein Nachdenken bedeutet einfaches Backtracking, da Sie nicht auf clevere Tricks achten müssen, die Sie unterwegs hinzugefügt haben. Sie können auch anhand der Regel erkennen, was diese Regel bewirkt.
Mein letztes Argument für die Konsistenz ist komplexer, aber ich denke, es lohnt sich, nachzusehen. Ich baue WordPress-Themes zum Verkauf auf ThemeForest und eine Funktion ist, dass Sie eine beliebige Farbe für Ihr Theme auswählen können. Elemente werden nach Ihrer Wahl neu eingefärbt. Dies geschieht so, dass bei jeder Definition einer 'Primärfarbe' dynamischer CSS-Code überschrieben wird, den wir mit PHP ausgeben. Das sieht ungefähr so aus:
Inhalt unserer LESS-Datei:
@ Primärfarbe: rot; .button Hintergrund: @ Primärfarbe; Polsterung: 8px 20px;
Inhalt eines PHP am Ende des HTML-Headers:
Grundsätzlich muss immer dann, wenn in der LESS-Datei ein Verweis auf '@ color-primary' vorhanden ist, eine PHP-Regel erstellt werden, um sicherzustellen, dass die vom Benutzer ausgewählten Farben auf der Website angezeigt werden. Dies kann eine Weile dauern und ist noch wichtiger äußerst langweilig. Um die Langeweile zu bekämpfen, erstellen wir ein Skript, das unsere LESS-Datei analysiert und den PHP-Code erstellt, den wir in einem Durchgang kopieren und einfügen können. Dies ist etwas schwierig, da es einige dynamische Regeln mit Funktionen und so weiter gibt, aber um dies herauszufinden, muss unsere LESS-Datei gut strukturiert und konsistent sein.
Eine große Zeitersparnis und eine Möglichkeit, die Konsistenz zwischen Projekten zu erhöhen, ist die Verwendung einer gemeinsamen Regelbibliothek. Vorher habe ich gefragt; Warum sollten Sie alle Grenzradiusregeln ausschreiben, wenn wir ein Mixin verwenden können? Jetzt können wir eine Stufe höher springen. Warum das Grenzradiusmixin für jedes Projekt neu schreiben, wenn Sie einfach dasselbe verwenden können?
Es gibt einige Mixins (insbesondere solche, die herstellerspezifische Anforderungen berücksichtigen), die für alle Projekte gleich sind. Diese können in eine "mixins.less" -Datei aufgeteilt werden, die Sie überall verwenden können. Hier sind einige Beispiele von Mixins, die immer griffbereit sind.
.Deckkraft (@opacity: 0,8) @ieopacity: @opacity * 100; filter: ~ "alpha (Deckkraft = @ ieopacity)"; -khtml-Opazität: @opacity; -moz-Opazität: @opacity; Deckkraft: @opacity;
.Farbverlauf (@start, @end) Hintergrund: @start; filter: ~ "progid: DXImageTransform.Microsoft.gradient (startColorstr =" @ start ", endColorstr =" @ end ", GradientType = 0)"; Hintergrund: -webkit-gradient (linear, links oben, links unten, Farbstopp (0%, @ Start), Farbstopp (100%, @ Ende)); Hintergrund: -webkit-linearer Gradient (oben, @start 0%, @end 100%); Hintergrund: -moz-linearer Gradient (oben, @start 0%, @end 100%); Hintergrund: -ms-linearer Gradient (oben, @start 0%, @ende 100%); Hintergrund: -o-linearer Gradient (oben, @start 0%, @ende 100%); Hintergrund: linearer Gradient (oben, @start 0%, @end 100%);
.Elementfarbe (@color) when (Helligkeit (@color)> = 60%) color: @color - # 888; .element-color (@color) when (Helligkeit (@color) < 60% ) color: #fff;
Letzteres ist besonders cool. Wenn die Hintergrundfarbe hell ist, ist die Textfarbe eine sehr dunkle Version derselben Farbe.
Ich schlage immer vor, über die Platzierung der Regel nachzudenken, die Sie schreiben. Sind Sie sicher, dass es global für alle Projekte verwendet wird? Es könnte verlockend sein, eine Menge Regeln einzufügen, aber in Wirklichkeit könnte es besser sein, auch eine projektspezifische Datei zu erstellen.
Erinnern Sie sich an das Bild des Kommentars früher? Der Container dieses Elements hat ein bestimmtes Format. Es hat einen weißen Rand und eine graue Umrandung. Viele andere Elemente dieses Themas teilen dieses Muster. Dies könnte mit einer Regel wie folgt erstellt werden:
.Feld Rand: 1px fest #fff; Umriss: 1px festes #dedede; .Kommentar Box; Hintergrund: #eeeeee;
Während dies ist Überall dort eingesetzt, ist es bei mehreren Projekten nicht gleich. Daher ist es besser, eine Datei wie "mytheme.less" zu erstellen, die diese weit verbreiteten, aber themenspezifischen Regeln enthält. Wenn Sie wirklich etwas wie in der globalen Datei verwenden möchten, können Sie es wie folgt erweitern:
.Rahmen (@ border-color: #fff, @ Gliederungsfarbe: #dedede) border: 1px solid @ border-color; Umriss: 1px einfarbig @ Umrissfarbe;
Mit dieser Regel können Sie denselben Boxstil genauso einfach erstellen, Sie können jedoch auch Parameter hinzufügen, um andersfarbige Boxrahmen zu erstellen. Sie können noch einen Schritt weiter gehen, indem Sie noch mehr abstrahieren und eine 'bootstrap.less'-Datei erstellen. Das bringt uns gut in unser nächstes Thema und schafft einen Rahmen für uns.
@ border-box-border-color: #fff; @ border-box-contour-color: #dedede;
.Rahmen (@bc: @ border-box-border-color, @oc: @ border-box-border-color) border: 1px festes @bc; Umriss: 1px festes @oc;
Das Erstellen eines eigenen Frameworks ist in der Regel ein Nein-Nein, es sei denn, Sie sind in Ihrem Hauptbereich (und 5-6 anderen) sehr fortgeschritten und haben einen sehr guten Grund dafür. Bei CSS und LESS ist es etwas anders. Sie können ab dem ersten Tag mit dem Erstellen Ihres eigenen Rahmens beginnen. Da LESS eine Obermenge von CSS ist, passt alles, was Sie tun, in den vorhandenen Code. Da CSS verzeihend und kaskadierend ist, können Sie keinen dauerhaften Schaden anrichten, der nicht rückgängig gemacht werden kann.
Ich schlage vor, eine Haupt-Mixins-Datei zu erstellen. Sie können jederzeit Dinge daraus entfernen oder nach Bedarf hinzufügen. Später können Sie projektspezifische Dateien, Dateien von Drittanbietern, eine Bootstrap-Datei usw. hinzufügen. Hier ist, wie mein Rahmen organisiert ist.
Wie bei jeder Sprache beinhaltet die praktische Anwendung des Codierens viele verschiedene Herausforderungen und Techniken, die nicht durch bloße Betrachtung der Dokumentation entdeckt und überwunden werden können. Um LESS in vollem Umfang zu nutzen, sollten Sie Vorschläge lesen und versuchen, die Logik zu verstehen, aber letztendlich müssen Sie Erfahrungen sammeln. Konsistenz, Logik und Einfachheit sollten Ihre Leitwörter sein, und LESS bietet Ihnen alle Werkzeuge, um dies zu erreichen.
Zum Schluss würde ich mich über Ihre Beiträge freuen und würde gerne hören, wie Sie LESS organisieren und wie Sie es in Ihre Projekte implementieren. Danke fürs Lesen!
Accentsconagua