1

LESS スコープをバイパスする方法はありますか? 面倒くさくなってきました。基本的に、背景、境界線などを定義する .text-box があります。次に、サブセクションで、margin-top: .text-box { margin-top: 10px } を追加する 1 回限りの変更があります。今では、そのセクション内で .text-box を使用できず、元のボックス スタイルを取得できません。代わりに、マージントップだけが得られます。階層構造でより高い定義を取得するにはどうすればよいですか? 関数にして、その関数を両方の場所で呼び出すこともできると思いますが、LESS を使用しているので、less と KISS を実行したいと思います。PHP では / プレフィックスを使用してグローバル名前空間にアクセスし、C++ では :: プレフィックスを使用してアクセスします。

さらに、ノード名を使用した定義は、プロトタイピングには機能しないようです。つまり、ul.products と宣言してから ul.categories { ul.products } を使用することはできません。ノード名を再利用するには、ノード名を省略する必要があります。意味: .categories { .products }。これは見落とし/不可能ですか？

ありがとう

4

1 に答える 1

2

では、ミックスインを定義したとしましょう。たとえば、次のようになります。

.text-box {
    background: #eee;
    border: 1px solid #ccc;
    color: #333;
    margin-top: 5px;
}

プロパティを追加したり、一部のサブセクションで変更したりしたい場合は、次のようにします。

div.content {
    div.sub_section {
        .text-box;
        margin-top: 10px; // this will override 5px defined in the mixin.
    }
}

...これは、ミックスインを配置し、追加する必要があるいくつかのプロパティを追加することです (これにより、ミックスイン自体のプロパティがオーバーライドされますが、オーバーライドするプロパティがミックスインが呼び出された後に定義されていることを確認してください。

出力cssファイルに2つの宣言が作成されるため、理想的な解決策ではありません（.sub_sectionで定義したものに続いてmixinからの宣言があります）が、それ以外の場合、パラメトリックを定義する以外にこの問題の解決策はわかりません混入します..

--

あなたの2番目の問題-lessは意図的にスコープ限定の定義をサポートしていないと思います...特定のミックスインが特定のタグで使用されることを本当に知る必要がある場合は、次のように対処します:

.ul_products   { ... }
.ul_categories { .ul_products; ... }

ul.categories { .ul_categories; }

バンドルを定義して、そこから何かを呼び出すこともできます:

#ul {
  .products   { ... }
  .categories { ... }
}

ul.categories { #ul > categories; }

私はそれが正しかったことを願っています.. ?

于 2011-05-05T12:22:44.550 に答える