7

ブートストラップコードのローカルコピーを変更せずにTwitterBootstrapのCSSをカスタマイズしようとしています。*そこで、Twitter Bootstrapプロジェクトを1つのフォルダーに複製し、アプリケーションコードを独自のフォルダーに入れました。

/html
    /bootstrap
       ...etc...
       /js
       /less
    /MyApp
       ...etc...
       /common_files
          /less
             style.less

「style.less」ファイル内で、いくつかのLESS変数を定義してから、ブートストラップファイルを含めます。

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

LESSCSS変数は実際には定数であるため、LESSファイルをCSSにコンパイルするときに、@sansFontFamilyが取得されないことに驚いています。lessc style.less > MyApp.css --yui-compress

だから...私は何が欠けていますか？BootstrapのLESSファイル内で定義された変数によって変数が上書きされるのはなぜですか？

*-「TwitterBootstrapCustomizationBest Practices」を確認しましたが、定数を利用する方が良いアプローチだと思います（機能させることができれば）。

4

4 に答える 4

9

正しいアプローチは、最初にブートストラップアセットをインポートしてから、LESS変数を使用してカスタム値を定義することです。したがって、質問のディレクトリ構造を考えると、次のようになります。

Bootstrapバージョン2.xを使用している場合：

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";
@import "../../../bootstrap/less/responsive.less";

/* custom settings that deviate from Bootstrap's default values */
@sansFontFamily: Trebuchet MS, Tahoma, sans-serif, Arial;
@baseFontSize: 11px;
@baseLineHeight: 18px;

Bootstrapバージョン3.xを使用している場合：

/* import bootstrap components from bootstrap-dedicated folder */
@import "../../../bootstrap/less/bootstrap.less";

/* custom settings that deviate from Bootstrap's default values */
@font-family-sans-serif: Trebuchet MS, Tahoma, sans-serif, Arial;
@font-size-base: 11px;
@line-height-base: 18px;

変数の完全なリストは、variables.lessファイルにあります。

于 2012-12-11T21:13:54.030 に答える
4

カスタム変数宣言をブートストラップ@importステートメントの下に移動するというPeterVRのアドバイスは、http：//lesscss.org/#-variablesのドキュメントによると正しいです。これは次のように述べています。

変数を2回定義する場合、変数の最後の定義が使用され、現在のスコープから上に向かって検索されます。例えば：

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

コンパイル先：

.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

（サンプルコードが編集されました-それらのバージョンにはいくつかのタイプミスがあります！）

したがって、コンパイルシーケンスは次のようになります。

  1. すべての@importsを処理して、LESSコードの単一のチャンクを構築します
  2. LESSコードをウォークスルーし、すべての変数宣言を収集します（スコープブロックごと）
  3. 変数宣言値は、同じ名前の以前のインスタンスを置き換えます（スコープブロックごと）
  4. 変数プレースホルダーを変数値に置き換えます

.class1 .class { three:これは、宣言の前に宣言されているにもかかわらず、の値が3である理由を説明します@var: 3;。

于 2013-02-02T14:30:46.050 に答える
1

こんにちは私はランダムなインターネット検索からより良い方法を得ました

http://ollomedia.com/using-twitter-bootstrap-the-right-way/

ソースコードの例、ダウンロードしてチェックアウトしてください

http://ollomedia.com/wp-content/uploads/sample.zip
于 2013-05-17T16:13:12.760 に答える
0

私は最近似たようなことをしましたが、私が見つけた最善のアプローチは、独自の「variables_override.less」を作成し、bootstrap.lessとresponse.lessに標準のvariables.lessをインポートした後にこれをインポートすることでした。次に、両方のファイルを通常どおりにコンパイルすると、変数がブートストラップのデフォルトをオーバーライドします

このアプローチでは、bootsrap.lessとresponse.lessを変更しますが、最小限の方法で変更します。

于 2012-12-11T02:09:18.167 に答える