3

スタイルブロックから渡された任意の値を使用して、Sassプレースホルダーをその場で作成したいと思います。

@mixin example-mixin($arg) {
    %placeholder-#{$arg} {
        property: $arg;
    }
    @extend %placeholder-#{$arg};
}

ミックスインの呼び出し：

.classname {
    @include example-mixin('value');
}

これはほとんど機能しますが、CSS出力では、何らかの理由で、.classname子孫セレクターであるかのように2回指定されます。

.classname .classname {
    property: value;
}

重複するクラス名の背後にあるロジックが表示されません-誰かが私が間違っていることを確認したり、回避策を提案したりできますか？

4

1 に答える 1

1

拡張クラスの代わりに実際のクラスを使用するとどうなるか見てみましょう

.a {
    .b {
        color: blue;
    }

    @extend .b;
}

出力：

.a .b, .a .a {
  color: blue;
}

これを実行したいと思う唯一の理由は、次のようにではなく、拡張の目的で拡張クラスを使用できる.classnameようにするためです。

.c {
    @extend .b;
}

出力がおそらくあなたが望むものではないことがわかります：

.a .b, .a .a, .a .c {
  color: blue;
}

.a .a私にもあまり意味がありませんが、無害です。あなたが実際にやりたいことは次のようなものです：

%placeholder-name, .classname {
    property: name;
}

.foo {
    @extend %placeholder-name;
}

そして、出力は次のようになります。

.foo, .classname {
  property: name;
}
于 2013-02-26T17:47:09.620 に答える