Bootstrap-Variable überschreibt mit WENIGER

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?

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

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

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';

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