Ich arbeite mit Bootstrap 2.0.3 mit WENIGER. Ich möchte es umfassend anpassen, aber ich möchte nach Möglichkeit vermeiden, Änderungen an der Quelle vorzunehmen, da Änderungen an den Bibliotheken häufig sind. Ich bin neu bei LESS, daher weiß ich nicht, wie die Kompilierung vollständig funktioniert. Was sind einige Best Practices für die Arbeit mit WENIGER oder WENIGER basierten Frameworks?
twitter-bootstrap
less
Joel Rodgers
quelle
quelle
Antworten:
Meine Lösung ist ähnlich wie die von jstam, aber ich vermeide es, wenn möglich, Änderungen an den Quelldateien vorzunehmen. Angesichts der häufigen Änderungen am Bootstrap möchte ich in der Lage sein, die neueste Quelle abzurufen und minimale Änderungen vorzunehmen, indem ich meine Änderungen in separaten Dateien aufbewahre. Natürlich ist es nicht vollständig kugelsicher.
Kopieren Sie bootstrap.less und variables.less in das übergeordnete Verzeichnis. Benennen Sie bootstrap.less in theme.less oder was auch immer Sie wollen um. Ihre Verzeichnisverzeichnisstruktur sollte folgendermaßen aussehen:
Aktualisieren Sie alle Verweise in theme.less, um auf das Bootstrap-Unterverzeichnis zu verweisen. Stellen Sie sicher, dass auf Ihre Variablen.less vom übergeordneten Verzeichnis und nicht wie folgt vom Bootstrap-Verzeichnis verwiesen wird:
...
Fügen Sie Ihre CSS-Überschreibungen unmittelbar nach dem Einfügen in die Datei theme.less ein.
Verknüpfen Sie theme.less anstelle von bootstrap.less in Ihren HTML-Seiten.
Immer wenn eine neue Version herauskommt, sollten Ihre Änderungen sicher sein. Sie sollten auch einen Unterschied zwischen Ihren benutzerdefinierten Bootstrap-Dateien machen, wenn eine neue Version herauskommt. Variablen und Importe können sich ändern.
quelle
Damit habe ich auch zu kämpfen. Einerseits möchte ich die Datei variables.less mit meinen eigenen Farben und Einstellungen stark anpassen. Andererseits möchte ich die Bootstrap-Dateien ein wenig wie möglich ändern, um den Upgrade-Prozess zu vereinfachen.
Meine Lösung (vorerst) besteht darin, eine Addon-WENIGER-Datei zu erstellen und diese in die
bootstrap.less
Datei einzufügen, nachdem die Variablen und Mixins importiert wurden. Also so etwas wie das:Auf diese Weise kann ich Bootstrap-Farben und -Schriftarten zurücksetzen oder zusätzliche Mixins hinzufügen. Mein Code ist separat, wird jedoch im Rahmen der restlichen Bootstrap-Importe kompiliert. Es ist nicht perfekt, aber es ist eine Notlösung, die für mich gut funktioniert hat.
quelle
bootstrap.less
unsere angepasste Datei abzurufen und möglicherweise viele Zeilen zu ändern, wenn sich die kernlosen Dateinamen usw. ändern. Ich habe sie verwendet Diese Lösung hat mein minimiertes JS mit Grunzen neu kompiliert und alles ist gut in der Haube! Anpassungen funktionieren ohne unfreundliche!important
Aussagen!Von meiner Seite habe ich nur eine Datei mit dem Namen
theme.less
importiertboostrap.less
, und direkt darunter überschreibe ich den Variablenwert, den ich nicht aktualisieren möchte (auch wenn es mit WENIGER schlecht zu sein scheint, aber es ist einfacher zu pflegen) .Dies funktioniert gut, wenn benutzerdefinierte Werte für Variablen in vorhanden sind
variables.less
Danach kompiliere ich
theme.less
stattdessen meine Datei ausbootstrap.less
Beispiel
theme.less
:quelle
Ein weitaus besserer Ansatz (IMHO) besteht darin, sich am Bootswatch- Github-Projekt namens Swatchmaker zu orientieren . Dieses Projekt ist speziell auf das Erstellen und Verwalten von Dutzenden von Bootstrap-Themen auf der Website zugeschnitten.
Das
Makefile
im Projekt erstelltswatchmaker.less
(Sie können es in etwas umbenennencustomizations.less
). Diese Datei enthält eine Reihe von Importen:Sie können den
swatch
Ordner und diebootswatch.less
Dateien nach Belieben umbenennen .Dies ist sinnvoll, da Sie Bootstrap aktualisieren können, ohne Ihre eigenen Dateien zu beeinträchtigen. Tatsächlich
Makefile
enthält das auch Befehle zum Abrufen der neuesten Version von Bootstrap. Weitere Informationen finden Sie in der README-Datei auf der Projektseite.Als Bonus schlägt die README- Datei auch vor, dass Sie das
watchr
Juwel installieren, das das Projekt automatisch erstellt, wenn sich eine.less
Datei ändert.quelle
Wenn (und nur wenn) Sie die Zeit haben, können Sie es so machen wie ich. Ich behalte meine eigene geänderte Version der Frameworks und lese bei jedem Update des Frameworks die Dokumente und überprüfe die Quelle auf Änderungen.
Diese Lösung klingt auf den ersten Blick vielleicht weniger ideal, aber ich habe meine Gründe dafür. Ich arbeite nicht mit einem, sondern mit einer Mischung aus vielen Frameworks, Best Practices, Resets / Normalisierungs-Stylesheets usw., und ich bin mir immer sicher, dass kein Update jemals bestehende Projekte in einer Weise verändern wird, die ich nicht erwartet habe.
Ich arbeite aus folgenden Gründen an und mit meinem eigenen benutzerdefinierten Framework.
quelle
Ich kam zu der gleichen Lösung wie Joel:
Benutzerdefinierte weniger Dateien
Genau wie oben beschrieben: Ich erstelle lokale Kopien für alle Less-Dateien, die ich anpasse: Zum Beispiel: "variables-custom.less", "alerts-custom.less", "button-custom.less". So kann ich einige Standards verwenden und meine eigenen Ergänzungen haben. Der Nachteil ist: Wenn Bootstrap aktualisiert wird, ist die Migration sehr schwierig.
Aber es gibt noch etwas anderes:
Stile überschreiben
Wenn ich mich nach Workflows umsehe, sehe ich oft Leute, die vorschlagen, Stile einfach zu überschreiben. Sie importieren also zuerst die Standard-Less-Dateien und fügen dann unten Ihre benutzerdefinierten Deklarationen hinzu. Der Vorteil hier ist: Es ist einfacher, auf eine neuere Version zu aktualisieren. Der Nachteil ist: Die kompilierte CSS-Datei enthält alle Überschreibungen. Einige CSS-Selektoren werden zweimal definiert. Der Browser muss also etwas heben, um herauszufinden, was tatsächlich angewendet werden soll. Das ist nicht wirklich sauber.
Ich frage mich, warum Präprozessoren nicht klug genug sind, um solche Doppeldeklarationen zu lösen. Gibt es einen besseren Workflow, den ich hier vermisse?
quelle
Fügen Sie einfach
@import "../../styles.less";
(oder wo immer sich Ihr Stylesheet befindet) Bootstrap.less unten hinzu. Auf diese Weise können Sie Bootstrap-Mixins wie.gradient
oder.border-radius
in Ihren eigenen Stilen verwenden.quelle