web-dev-qa-db-ja.com

LESSファイルを完全にインポートせずにクラス/ミックスインを参照する

私はwordpressにrootsテーマを使用しています： https://github.com/retlehs/roots/

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

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

@import 'bootstrap.less';を使用すると、bootstrap css全体がapp.cssに追加されます。bootstrap.lessをコンパイルの参照として使用するにはどうすればよいですか？

csstwitter-bootstrapless
47
FLX

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

「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;
}

名前空間をミックスイン（名前の後にかっこを追加）にすることで、ファイルはインポートされます（インポートせずに外部からアクセスする方法はわかりません）が実際のbootstrapコードをコンパイルして、最終的なcssファイル出力にします。この手法では、名前空間の呼び出し#bootstrapRef >を使用して、ブートストラップのクラスやミックスインなどにアクセスできるようにし、独自に定義したクラスなどでそれらを使用できるようにします。

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

53
ScottS

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

4
Declan Cook

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

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

EDIT：@PavloMykhalovが示唆するように、多分buttons.less

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

3
Tom Sarduy

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

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

私はLESSで機能リクエストを記録したばかりですが、これが以前にリクエストされたかどうかは不明ですが、検索して何も見つかりませんでした。繰り返し叩かれることはないでしょうね。

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

[〜＃〜] update [〜＃〜]問題は重複していることが判明しました。開いている問題はここにあります https： //github.com/cloudhead/less.js/issues/622

1
Ayyash