49

WordPress の roots テーマを使用しています: https://github.com/retlehs/roots/

プリコンパイル済みの bootstrap.css が既に付属しており、カスタマイズには app.css を使用することをお勧めします。HTML または JavaScript を介してボタンにクラスを追加するオプションがないため、LESS ソースを使用して css クラスを参照したいと考えています。たとえば、送信ボタンにブートストラップ ボタン スタイルを適用したいと考えています。

input#submit{
.btn;
.btn-primary;
}

それを使用する@import 'bootstrap.less';と、ブートストラップ css 全体が app.css に追加されます。コンパイルのリファレンスとして bootstrap.less を使用するにはどうすればよいですか?

4

4 に答える 4

54

あなたが尋ねる中心的な質問は

「bootstrap.less をコンパイルのリファレンスとして使用するにはどうすればよいですか?」

LESS バージョン 1.5 以降

LESS 1.5 では、ファイルを純粋に参照としてインポートできるようになりました。そのようです：

@import (reference) 'bootstrap.less';

そのファイルから実際のコードが CSS として出力されることはありませんが、すべてがミックスインとして使用できるようになります。

元の回答（すべてのコメントのコンテキストのために保持）

[免責事項: これが 1.3.3 の時点で機能するかどうかは不明ですが、この元の回答は後のバージョンでも役立つと思います。ただし、OP が望んでいたものを真に得るためには、LESS 1.5 の新しい機能をお勧めします。]

現在のバージョンの LESS (1.3.3) は、名前空間を使用することでこれに対応できます。そのようです：

#bootstrapRef() {
  @import: 'bootstrap.less':
}

input#submit{
  #bootstrapRef > .btn;
  #bootstrapRef > .btn-primary;
}

名前空間を mixin にする (名前の後に括弧を追加する) と、ファイルはインポートされます (インポートせずに外部からアクセスする方法はわかりません) が、実際のブートストラップ コードを最終的な CSS にコンパイルするべきではありません。ファイル出力。この手法が行うべきことは、名前空間 call を介してブートストラップのクラス、ミックスインなどにアクセスできるように#bootstrapRef >し、それらを独自の定義済みクラスなどで使用できるようにすることです。

これにバグがあるかどうかは完全にはテストしていませんが、理論的には機能するはずです。

于 2013-01-22T16:39:38.097 に答える
4

LESS でこれを行うのは少しトリッキーですが、次のように実現できます。

#bootstrap() {
    .btn() {
        @import "bootstrap/variables.less";
        @import "bootstrap/mixins.less";
        @import "bootstrap/buttons.less";
    }
}

input#submit{
  #bootstrap > .btn;
}

その結果、mixins.less および variables.less からいくつかの追加クラスが宣言されます。ほとんどの場合.clearfix、すべての.btnクラスが追加されますinput#submit

ここで長い出力を参照してください。

http://pastebin.com/ZBAZZ3kS

于 2013-02-11T23:29:06.127 に答える
3

外部ファイル内に現在の参照cssルールのみをインポートするツールがあるかどうかはわかりませんが、Boostrapは非常に整理された構造であるため、探しているスタイルがオンmixins.lessになっているかどうかを確認してください。インポートする必要はありません。bootstrap.lessファイル全体。

また、この関連する質問を確認してください。Boostrapをカスタマイズするためのいくつかの優れたベストプラクティスがあります。

編集： @PavloMykhalovが示唆するように、多分見る方が良いでしょうbuttons.less

注：これは、この種のもののための素晴らしいツールになります。いつか私はそれに取り組みます

于 2013-01-22T08:20:49.327 に答える
1

LESSが現在それをサポートしているとあなたが信じた理由はわかりません。これを可能にするには、オプションをより明示的にする必要があります。現在、チャンクをインポート、解析、保存し、チャンクを出力テキストに実行するだけです。

このシーケンスを停止する明示的なものがない限り、別の方法で実行することはありません。

LESS で機能リクエストをログに記録しましたが、これが以前にリクエストされたかどうかはわかりませんが、検索しても何も見つかりませんでした。

https://github.com/cloudhead/less.js/issues/1169

更新 問題は重複していることが判明しました。公開されている問題はこちらです: https://github.com/cloudhead/less.js/issues/622

于 2013-02-08T15:54:09.263 に答える