it-swarm.com.de

Bootstrap Variable überschreibt mit LESS

Ich habe den ganzen Tag lang Nachforschungen angestellt, da ich der Meinung war, dass es sich lohnen würde, etwas Zeit zu investieren, um bewährte Vorgehensweisen für das Anpassen zu erlernen Bootstrap .

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 haben, ohne original = zu berühren bootstrap Quelldateien.

Zunächst wollte ich testen, ob das Raster von 12 auf 16 Spalten geändert wurde. Dazu erstellte ich eine eigene variable less-Datei und fügte @gridColumns hinzu: 16; nur in diese Datei und importiert 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-Datei mit der HTML-Datei verknüpft, aber das Raster wird sich nicht in 16 Spalten ändern.

Kann jemand bitte darauf hinweisen, was ich falsch mache?

70
Seong Lee

Ich arbeite an einem ähnlichen Projekt, bei dem wir bootstrap an einem Speicherort eines Drittanbieters haben und dann nur mixins.less Und variables.less Überschreiben. Das Muster, für das wir verwenden Dies fügt drei Dateien hinzu und berührt bootstrap überhaupt nicht):

/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 Raster ü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 kompilierten Computer 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 dies tue, erhalte ich in meinem Setup eine CSS-Datei mit einigen seltsamen .span15-Werten (da ich weder @gridColumnWidth noch @gridGutterWidth aktualisiert habe, aber die .row-fluid-Werte tatsächlich funktionieren genau so, wie Sie es erwarten würden, da sie durch einfache Aufteilung berechnet werden).

Ich mag dieses Setup, weil ich cd in bootstrap-master und git pull Und neue Updates holen kann, ohne einen meiner spezifischen Kludges zusammenführen zu müssen (es gibt mir auch einen guten Griff auf das, was ich habe tatsächlich überschrieben)

Die andere Sache ist, dass es sehr klar ist, dass shared.less nur grid.less verwendet (und nicht nur Bootstrap). Dies ist beabsichtigt, da Sie in den meisten Fällen nicht den gesamten Bootstrap benötigen, sondern nur ein paar Teile davon, um loszulegen. Die meisten bootstrap weniger Dateien sind insofern nett, als ihre einzigen festen Abhängigkeiten shared.less Und mixins.less Sind.

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

43
Marcos

Überschreiben von Variablen nach dem Importieren des ursprünglichen bootstrap.less funktioniert super für mich:

@import "less/bootstrap.less";

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

Das Kompilieren der obigen WENIGER-Quellausgaben wurde ordnungsgemäß angepasst Bootstrap CSS-Code.

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

152
Adam

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