web-dev-qa-db-ja.com

Bootstrap LESSでオーバーライドする変数

Bootstrap をカスタマイズするためのベストプラクティスを学ぶのに時間を費やす価値があると考えたため、私は1日中調査を続けてきました。

http://Twitter.github.io/bootstrap/customize.html から選択して要素をカスタマイズするためのフレンドリーなページがあることを確認できますが、元の= bootstrap=ソースファイル。

最初に、グリッドを12列から16列に変更することを基本的にテストし、これを行うには、独自の変数レスファイルを作成し、@ gridColumns：16を追加しました。このファイルにのみ、次のようにbootstrap.less内にこのカスタムをインポートします。

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

次に、 WinLess を使用して、bootstrap.lessファイルをコンパイルして、変数import呼び出しをオーバーライドした新しいbootstrap.cssを取得し、cssをhtmlファイルにリンクしましたが、グリッドは16列に変更されません。

誰かが私が間違っていることを指摘してもらえますか？

variablestwitter-bootstrapcustomizationless
70
Seong Lee

「サードパーティ」の場所にbootstrapがあり、mixins.lessおよびvariables.less。このために使用するパターンは3つのファイルを追加し、bootstrap=にまったく触れません（置換を簡単にドロップできるようにします）：

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

mixinsファイル

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

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

グリッドをオーバーライドする変数ファイル。

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

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

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

実際にインポートされる（またはより少ないコンパイラーにフィードされる）ファイル：

/*
 *    /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

私のセットアップでは、これを行うと、奇妙な.span15値を持つcssファイルが得られます（@gridColumnWidth または @gridGutterWidthしかし、.row-fluid値は、単純な除算によって計算されるため、実際に期待どおりに機能します）。

ブートストラップマスターにcdでき、git pullそして、特定のクラッジをマージすることなく、新しい更新を取得します（実際にオーバーライドしたものを適切に処理できます）

もう1つは、shared.lessが（ブートストラップのすべてではなく）grid.lessのみを使用していることは非常に明確であるということです。これは意図的なものです。ほとんどの場合、ブートストラップのすべてを必要とするのではなく、その一部だけを実行する必要があるからです。ほとんどのbootstrap=より少ないファイルは、ハード依存関係がshared.lessおよびmixins.less

これがまだ機能しない場合は、WinLessが混乱している可能性があります

43
Marcos

オリジナルのbootstrap.lessをインポートしてから変数を上書きするafter

@import "less/bootstrap.less";

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

上記のLESSソース出力を適切にカスタマイズして、Bootstrap CSSコードをカスタマイズします。

関連情報： http://lesscss.org/features/#variables-feature-lazy-loading

152
Adam

誰かを助けるかもしれない別の例：

@import 'bootstrap/bootstrap/variables';

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

@import 'bootstrap/bootstrap';
1
adamj