1

要素が後者の mixin を持つ要素の子である場合にのみ前者が呼び出されるように、LESS で別の mixin 内にネストされた mixin を持つことは可能でしょうか?

私は知っています、紛らわしいです、ここに簡単な例があります（動作コードではなく、単なる概念です）：

以下

.foo(@x) {
    width: @x;

    .foo(@y) {
        width: @y/@x;
    }
}

.a {
    .foo(20px);

    .b { 
        .foo(2);
    }
}

出力CSS

.a {
    width: 20px;
}

.a .b {
    width: 10px;
}

これを行うと、.foo(2)on.bを呼び出すと にコンパイルされwidth: 2ます。

これは設計上このようになっているはずですか、それとも構文に何か問題がありますか? また、私は完全に間違った角度から問題に取り組んでいますか?おそらく、私が考えていないもっと簡単な解決策がありますか?

編集

どうやらそれは LESS の最新バージョンで修正されたようですが、私が達成しようとしているのは、上記の最小限の例よりも少し複雑です。

基本的に私がやりたいことは、ミックスインを.foo持つ別の要素の子であるすべて.fooが計算のために親変数を取ることです。

以下

.foo(@x) {
    width: @x;

    .foo(@y) {
        width: (@x/@y);
    }
}

.a {
    .foo(100px);

    .b { 
        .foo(2px);

        .c {
            .foo(5px);
            /* ...and so on */
        }
    }
}

出力CSS

.a {
    width: 100px;
}

.a .b {
    width: 50px;
}

.a .b .c {
    width: 10px;
}

代わりに、次のようになります。

.a .b .c {
    width: 50px;
}

LESS を次のように変更しようとしました。

.foo(@x) {
    width: @x;

    .foo(@y) {
        @x:    (@x/@y)
        width: (@x);
    }
}

しかし、再帰変数定義の構文エラーが発生します。どうやら LESS は次のような定義を許可していません:

@a: 1;
@a: (@a+1);
4

1 に答える 1

5

ここでの主な問題は@y/@x. 試してみる@x/@yと、もっと期待されるものが得られるはずです;-)

ネストされた mixin は実装が少ないと解釈が異なるため、答えを 2 つの部分に分けます。

1. less2css.org で LESS >1.3.1 で動作するソリューション (ネストされた mixin を使用)

それ以外の場合、上記のコードは実際に less2css.org で必要なことを実行すると思います。LESS 1.4 の概念と同様に、デフォルトでは括弧で囲む必要があるため、数学に注意する必要があります。

ネストされていないルールでそのような mixin を呼び出すと、次のようになります。

.b { .foo(@y); }

入力変数で単位を使用するか、ミックスインで ad を使用する必要がありunit()ます。そうしないと、入力した数値のみが取得されます。たとえば、次のようになります。

.foo(@x) {
    width: unit(@x,px);
    .foo(@y) {
        width: (@x/@y);
    }
}

.a {
    .foo(20px);
    .b{
        .foo(2);
     }
}
.c {
    .foo(2);
}

CSSを出力します：

.a {
  width: 20px;
}
.a .b {
  width: 10px;
}
.c {
  width: 2px;
}

サブクラスの属性がユニットとしてピクセルを持っているかどうかをガードでチェックして、因子を渡さないクラスをネストすることもできます。

.foo(@x) {
    width: @x;
    .foo(@y) when (ispixel(@y)) {
        width: @y;
    }
    .foo(@y) when not (ispixel(@y)) {
        width: (@x/@y);
    }
}

ただし、このネストされた mixin ソリューションのテストは、less2css.org でのみ機能するように見えますが、jsbin.com、lesstester.com、およびその他のサービスでは動作しません [ .foo .too2 番目のレベルを適用するには、ネストされた (2 番目の) レベルの mixin を呼び出す必要があります。ミックスインからのスタイリング]。

そこで、私がテストした別のアプローチを提案します。それは、1.2 未満の CSS コンパイラを使用して、言及されたすべてのページで機能するようです。

ispixel2.ほとんどのLESS>1.2インストールで機能するはずのガードを使用したソリューション

ネストされた mixin の代わりに、単位としてピクセルをチェックするガードに基づく 2 つの mixin を構築できます。

  • 属性@xがピクセル単位の場合 => 返して変数にwidth:@x;代入@x@width
  • 属性@xがピクセル単位でない場合 => 戻りますwidth:@width/@x;(注: 最初にin@widthを使用して mixin を呼び出して、事前に割り当てる必要があります)@xpx

例LESS:

.foo(@x) when (ispixel(@x)) {
        width:@x;
        @width:@x;
}
.foo(@x) when not (ispixel(@x)) {
        width: (@width/@x);
}


.a, .b {
  background-color: #ddd;
  height: 100px;
}
.a {
  .foo(100px);
  .b {
    background-color: red;
    .foo(2);
  }
}

番目の出力CSS :

.a, .b {
  background-color: #ddd;
  height: 100px;
}
.a {
  width: 100px;
}
.a .b {
  background-color: red;
  width: 50px;
}

あなたのアプローチとは異なりますが、おそらくもう少し単純で、うまく機能しているようです。

編集：

したがって、ユニット付きの入力とユニットなしの入力を区別したくないので、2 つのパラメーター mixinを呼び出すことしか考えられません。ここでは、1 つのパラメーターがベース (このwidth場合) に使用され、2 番目のパラメーターがデフォルトの要因として使用されます。 to 1. これで、何度でも再帰的に呼び出すことができます。

以下：

.foo(@x,@y:1){
    width:unit(@parent,px);
    @parent:(@x/@y);
}


.a {
    .foo(100px);
    .b{
        .foo(@parent,2px);
        .c{
            .foo(@parent,5px);
            .d{
                .foo(@parent,0.05);
            }
        }
    }
}

出力CSS:

.a {
  width: 100px;
}
.a .b {
  width: 50px;
}
.a .b .c {
  width: 10px;
}
.a .b .c .d {
  width: 200px;
}

したがって、ミックスインで出力に目的のユニットを割り当てることができるため、入力のユニットが何であるかは問題ではありません。ミックスインを呼び出すと、現在のスコープの変数が上書きされ、ネストされたルールに継承され、ミックスインを再度呼び出すとき@parentに幅パラメーターとして使用できます。@xこれにより、望ましい結果が得られるはずです。

于 2013-04-14T05:57:22.237 に答える