2

多くのスタイルを含む少ないスタイルシートがあり、他のいくつかを新しいシートにコピーしたいとします。次のようにします。

huge-stylesheet.less :

/*

blah blah blah for dozens of styles

*/
.loopy {
    color: greenyellow
}

tiny-stylesheet.less :

.froopy {
    .loopy
}

コンパイル時に tiny-stylesheet.css に.floopyスタイルのみが定義され、他のすべてが huge-stylesheet.less に含まれないように設定することは可能ですか?

4

1 に答える 1

2

LESS 1.5 の更新された回答

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

@import (reference) "huge-stylesheet";

これにより、 tiny-stylesheet.lessに出力することなく、 huge-stylesheet.lessのすべての LESSを使用できるようになります。

その後、最初に意図したとおりに実行できるはずです。

.froopy {
    .loopy;
}

元の回答

はい、名前空間を使用することで、「コンパイル時に tiny-stylesheet.css に .froopy スタイルが定義されているだけで、他のすべてではない」可能性があります。次のように、名前空間を別のファイル ( master.less など)に設定する必要がある場合があります。

#yourNameSpace() {
    your huge code that was in huge-stylesheet 
}

そして、別のファイルを使用して、次のような huge-stylesheet.lessを生成します。

@import "master"; 
#yourNameSpace; //call the code to produce the huge sheet

そして、次のように小さく使用します。

@import "master";
.froopy {
    #yourNameSpace > .loopy;
}

または、コードを巨大なシートにそのまま残し、 tiny-stylesheet.lessでこれを行うこともできます (ブロックにネストできるかどうかを知るためにインポートを試したことはありません)。

#yourNameSpace() {
    @import "huge-stylesheet"; 
}

.froopy {
    #yourNameSpace > .loopy;
}

.loopyいずれにしても、名前空間からコードを抽出するだけです。小さなLESS ファイルによって名前空間コードから最終的な CSS コードが生成されることはありません。

于 2013-01-03T18:58:52.663 に答える