Bootstrap-Variable überschreibt mit WENIGER

70

Ich habe den ganzen Tag nachgeforscht, da ich dachte, es würde sich lohnen, einige Zeit damit zu verbringen, bewährte Methoden zum Anpassen von Bootstrap zu erlernen .

Ich kann sehen, dass eine benutzerfreundliche Seite zum selektiven Anpassen von Elementen unter http://twitter.github.io/bootstrap/customize.html verfügbar ist, aber ich möchte mehr Kontrolle als diese haben, ohne die ursprünglichen Bootstrap-Quelldateien zu berühren.

Zunächst wollte ich testen, wie sich das Raster von 12 auf 16 Spalten ändert. Dazu habe ich meine eigene Datei ohne Variablen erstellt und @gridColumns hinzugefügt: 16; nur in diese Datei und importierte diese benutzerdefinierte weniger in bootstrap.less wie folgt.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Dann habe ich mit WinLess die Datei bootstrap.less kompiliert, um eine neue Datei bootstrap.css mit überschriebenem Variablenimportaufruf zu erhalten, und die CSS mit der HTML-Datei verknüpft, aber das Raster ändert sich nicht in 16 Spalten.

Kann jemand bitte darauf hinweisen, was ich falsch mache?

Seong Lee
quelle

Antworten:

43

Ich arbeite an einem ähnlichen Projekt, bei dem wir Bootstrap an einem Ort eines Drittanbieters haben und dann nur mixins.lessund überschreiben variables.less. Das Muster, das wir hierfür verwenden, fügt drei Dateien hinzu und berührt den Bootstrap überhaupt nicht (so dass Sie leicht Ersatz ersetzen können):

/style
|- bootstrap-master/
|    |- less/
|    |- js/
|   ...
|- shared/
    |- shared.less
    |- variables.less
    |- mixins.less

die Mixins-Datei

/*
 *    /style/shared/mixins.less
 */

@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

die Variablendatei, in der Sie Gitter überschreiben würden

/*
 *    /style/shared/variables.less
 */

@import "../bootstrap-master/less/variables.less";

@gridColumns: 16; // let's pretend this is your site-specific override

Die Datei, die tatsächlich importiert (oder an einen weniger Compiler weitergeleitet) wird:

/*
 *    /style/shared/shared.less
 */

@import "variables.less";
@import "mixins.less";

@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

Wenn ich das mache, bekomme ich in meinem Setup eine CSS-Datei mit einigen seltsamen .span15-Werten (da ich nicht aktualisiert habe @gridColumnWidthoder @gridGutterWidthaber die .row-fluid-Werte tatsächlich genau so funktionieren, wie Sie es erwarten würden, da sie ' neu berechnet durch einfache Division).

Ich mag dieses Setup, weil ich cdin Bootstrap-Master git pulleinsteigen und neue Updates abrufen kann, ohne meine spezifischen Kludges zusammenführen zu müssen (es gibt mir auch einen guten Überblick darüber, was ich tatsächlich überschrieben habe).

Die andere Sache ist, dass es sehr klar ist, dass shared.less nur grid.less verwendet (und nicht den gesamten Bootstrap). Dies ist beabsichtigt, da Sie in den meisten Fällen nicht den gesamten Bootstrap benötigen, sondern nur einige Teile davon, um loszulegen. Die meisten Dateien ohne Bootstrap sind zumindest insofern nett, als ihre einzigen harten Abhängigkeiten shared.lessund sindmixins.less

Wenn dies immer noch nicht funktioniert, wird WinLess möglicherweise verwirrt

Marcos
quelle
Vielen Dank für die Erkenntnisse. Ich habe Ihre Lösung ausprobiert und das Raster wurde auf 16 geändert, aber das Layout reagiert nicht mehr auf die Bildschirmgröße. Kompilieren Sie nur shared.less und verknüpfen Sie die kompilierte CSS unter der Master-Bootstrap-CSS? Danke
Seong Lee
@SeongLee kein Problem! Ich glaube, dass es einige weitere Variablen geben wird, die aktualisiert werden müssen, damit das neue Raster ordnungsgemäß funktioniert. Nur shared.lesswird kompiliert und Seiten werden direkt mit dieser Datei (oder in der Produktion mit ihrer kompilierten Ausgabe) verknüpft. Sie sollten niemals irgendwo anders Bootstrap einbinden müssen, obwohl Sie alle fehlenden Module einschließen müssen. Wenn Sie möchten, kann ich die Antwort aktualisieren, um dies klarer zu machen.
Marcos
Danke @Marcos Wie meinst du, ich sollte niemals Bootstrap einbinden müssen? Wenn Sie können, aktualisieren Sie bitte die Antwort zur Klarstellung, wie Sie gesagt haben. Vielen Dank!
Seong Lee
153

Das Überschreiben von Variablen nach dem Importieren des Originals bootstrap.lessfunktioniert für mich hervorragend:

@import "less/bootstrap.less";

@body-bg:     red;
@text-color:  green;
@link-color:  blue;

Das Kompilieren der obigen WENIGER Quellausgaben gibt den richtig angepassten Bootstrap-CSS-Code aus.

Relevante Informationen: http://lesscss.org/features/#variables-feature-lazy-loading

Adam
quelle
22
Dies funktioniert, weil WENIGER Variablen auf der Grundlage der zuletzt definierten Gewinne für ihren aktuellen Bereich gelten. In den Dokumenten finden Sie einige Beispiele: lesscss.org/#-variables
OrganicPanda
3
Ich hätte nie gedacht, dass das funktionieren würde. Die Idee, alle Importe aus bootstrap.less mit einer modifizierten Version von variables.less zu duplizieren, war abscheulich. Aber wie in dieser Antwort vorgeschlagen, kann ich die Variablenüberschreibungen anschließend festlegen (in meinem Fall nur @icon-font-path) und alles funktioniert. Vielen Dank!
Tremby
2
Wenn Sie dies tun, wird verhindert, dass Ihre Änderungen an Variablen auf bootstrap.css angewendet werden, nicht wahr? Es wird offensichtlich die Variablen in weniger nach Ihren Änderungen überschreiben, aber nichts, was Sie ändern, wird Bootstrap selbst beeinflussen (nach der Kompilierung) ...
derekmx271
1
@ derekmx271 Nein, die Änderungen wirken sich auf alles aus - siehe Absatz über Standardvariablen
Adam
1
+1 Ich habe auch Variablen kopiert / umbenannt. Ohne, aber das ist SO viel besser. Dies sollte definitiv die akzeptierte Antwort sein.
Daniel Liuzzi
1

Ein weiteres Beispiel, das jemandem helfen kann:

@import 'bootstrap/bootstrap/variables';

// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;

@import 'bootstrap/bootstrap';
Adamj
quelle
-3

Eine einfache Möglichkeit besteht darin, die Stile in Ihrem Stildokument mit demselben Namen zu überschreiben und als! Wichtig zu markieren.

Sterling Diaz
quelle
Das Überschreiben von Stilen !importantist im Allgemeinen eine schreckliche Idee, aber das Überschreiben von Themenstilen !importantist noch schlimmer.
CervEd