Less.js: セレクター内の@import（機能リクエスト）

作成日 2012年02月23日 · 12コメント · ソース: less/less.js

セレクター内でのインポートを許可すると、コードの再利用とスタイルスコープの可能性の素晴らしいコレクションが開かれます。何かのようなもの：

.foo{
    <strong i="6">@import</strong> "bar";
}

CSSでサポートされたウィジェットのモジュールを少なくする場合に特に便利です。たとえば、AutoRotatorとStackContainerを作成し、セレクター内にインポートをネストする機能がある場合、次のことができます。

# AutoRotator/pane.less
.pane{
    border: 1px solid gray;
    width: 300px;
    /* etc. ... */
}

# StackContainer/pane.less
.pane{
    border: 1px solid orange;
    width: 200px;
    /* etc. ... */
}

そして、どちらのライブラリのユーザーも、次のようなさまざまなスタイルの範囲を決定できます。

# main.less
.myRotator {
    <strong i="13">@import</strong> "AutoRotator/pane";
}

# main.less
.myStack {
    <strong i="14">@import</strong> "StackContainer/pane";
}

セレクターがファイル内でいかに単純に見えるかに注目してください。これは基本的にhttp://www.w3.org/TR/css3-namespace/をシミュレートしているだけだと思い

ソース

jnewman

👍8 ❤2

最も参考になるコメント

名前空間のインポートを許可するためのダーティハックを見つけました。次の行にコメントするだけです。

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L20

と

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L27

のように見えるように

// Evaluate imports
//if (ruleset.root || ruleset.allowImports) {
    for (var i = 0; i < ruleset.rules.length; i++) {
        if (ruleset.rules[i] instanceof tree.Import) {
            Array.prototype.splice
                 .apply(ruleset.rules, [i, 1].concat(ruleset.rules[i].eval(env)));
        }
    }
//}

しかし、これがコンパイルにどのような影響を与えるのか、私にはわかりません。 Twitterのブートストラップを使用して小さなテストを行いました。

#test {
  <strong i="15">@import</strong> "../../bootstrap/less/bootstrap";
}

以下にコンパイルします：

#test article,
#test aside,
#test details,
#test figcaption,
#test figure,
#test footer,
#test header,
#test hgroup,
#test nav,
#test section {
  display: block;
}
...

そしてそれは私の場合はうまくいきました。誰かがより大きなプロジェクトでこれを確認できますか？

@cloudheadインポートがルートレベルでのみ実行されるのはなぜですか？そして、なぜruleset.allowImports常にundefinedあり、それを常にtrueに上書きするにはどうすればよいですか？ :)

ありがとう

marcboeker 2012年02月25日

👍4

全てのコメント12件

+1 。間違いなく役に立ちます。

souldreamer 2012年02月23日

marcboeker 2012年02月24日

これを追加してください！

bkrembs 2012年02月24日

名前空間のインポートを許可するためのダーティハックを見つけました。次の行にコメントするだけです。

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L20

と

https://github.com/cloudhead/less.js/blob/master/lib/less/tree/ruleset.js#L27

のように見えるように

// Evaluate imports
//if (ruleset.root || ruleset.allowImports) {
    for (var i = 0; i < ruleset.rules.length; i++) {
        if (ruleset.rules[i] instanceof tree.Import) {
            Array.prototype.splice
                 .apply(ruleset.rules, [i, 1].concat(ruleset.rules[i].eval(env)));
        }
    }
//}

しかし、これがコンパイルにどのような影響を与えるのか、私にはわかりません。 Twitterのブートストラップを使用して小さなテストを行いました。

#test {
  <strong i="15">@import</strong> "../../bootstrap/less/bootstrap";
}

以下にコンパイルします：

#test article,
#test aside,
#test details,
#test figcaption,
#test figure,
#test footer,
#test header,
#test hgroup,
#test nav,
#test section {
  display: block;
}
...

そしてそれは私の場合はうまくいきました。誰かがより大きなプロジェクトでこれを確認できますか？

ありがとう

marcboeker 2012年02月25日

👍4

パッチが適用されたフォークは次のとおりです。
https://github.com/marcboeker/less.js/commit/5a2bdbcdaa03b7ded032f7a484f7f9843416fe8d

チェックアウトしてnpm install less.jsを実行するだけです

-マーク

marcboeker 2012年02月25日

これを修正します

cloudhead 2012年02月27日

@cloudhead + 1＆ありがとう

marcboeker 2012年02月27日

allowImportsは@mediaブロックに使用されます...しかし、どのブロックでも許可されるべきではない理由はないと思います。

cloudhead 2012年02月28日

ああ、そうです、理由がありました、それはパフォーマンスの問題です。 CLIフラグを追加できるかどうかを確認します。

cloudhead 2012年02月28日

完了しました。パフォーマンスへの影響はそれほど高くなかったため、デフォルトでオンになっています。無効にするオプションは--strict-imports

cloudhead 2012年02月28日

🎉3

ありがとう！これは大きな改善です。

marcboeker 2012年02月28日

@marcboekerと@cloudheadに感謝します。この変更で

jnewman 2012年02月28日

このページは役に立ちましたか？

0 / 5 - 0 評価

Less.js: セレクター内の@import（機能リクエスト）

最も参考になるコメント

全てのコメント12件

関連する問題