2

私はSCSSでこれを行うことができることを知っています:

.foo {
    color: blue;
    a {
        color: red;
        .bar & { color: green; }
    }
}

そして、これを取得します：

.foo { color: blue; }
.foo a { color: red; }
.bar .foo a { color: green; }

しかし、そのセレクターを追加して、次のようにする方法はありますか?

.foo { color: blue; }
.foo a { color: red; }
.foo.bar a { color: green; }

これは単純な例であることに注意してください。私の使用例では、ルールはこれよりもはるかに深くネストされています。

4

3 に答える 3

5

1&レベル上でのみ機能します。コード例では、期待するコードを取得できません。別の方法で処理する必要があります。

.foo {
    color: blue;
    a {
        color: red;
    }
    &.bar {
       a {
          color:green;
       }
    }
}
于 2013-03-29T14:28:06.637 に答える
1

どうやらこれは phpsass コンパイラでのみレンダリングされるため、コンパイラ固有です。

の前のスペースを取り除くだけです&：

.foo {
    color: blue;
    a {
        color: red;
        .bar& { color: green; }
    }
}

コンパイルすると:

.foo {
  color: blue;
}

.foo a {
  color: red;
}

.bar.foo a {
  color: green;
}

.foo.barとは同等のセレクターであることに注意してください.bar.foo(どちらも両方のクラスが項目にある場合にのみ選択を行います)、そのような場合、順序は重要ではありません。さて、これがより深くネストされた構造（あなたが持っていると述べている）で機能するかどうかはすべて、ターゲットにしようとしているものに依存しますが、本質的にこれは、構造がどれほど深くても、クラスを最も外側のレベル（同等のもの）に追加します.foo.

于 2013-03-29T18:50:55.593 に答える
-1

XY に問題があります。の色をオーバーライドする必要がありますがa、それを行う最適な方法を求める代わりに、奇妙な構造を発明し、なぜそれが機能しないのかを尋ねます。

問題は、色をオーバーライドするためにa内部に入れる必要がないということです。.fooAnは直接ではなく、自身のプロパティからa色を取得します。.fooacolor

デフォルトcolorでは に設定されてinheritおり、親から自然に継承されます。したがって、aの色をオーバーライドするには、そのcolorプロパティをinherit必要なものに変更します。そのために、親をセレクターに入れる必要はありません!

UPD : cimmanonが以下で私を修正したように、の色はa親から継承されず、代わりに独自のデフォルト値を使用します。

したがって、最適なソリューションは次のようになります。 

.foo {
  color: blue; }

a {
  color: red;

  .foo.bar & {
    color: green; } }

また、正確にオーバーライドしたいという事実は、.foo.bar a物事を複雑にしすぎていることを示しています。

、、およびの.foo.bar a4 つの異なる状況を処理する必要がある場合にのみ必要です。リンクの色ってそんなに違うの？なんで？a.foo a.bar a.foo.bar a

HTML 構造をリファクタリングして、よりセマンティックなものにし、次のようなコードに満足できることは間違いありません。

a {
  color: red; }

#header {
  color: blue; }

.cart-item 
   & a {
    color: green; } }

このコードでは、リンクは 2 つの異なる色しか使用できません。カートの項目は緑、その他はすべて赤です。

多くの色を使用する正当な理由がある場合は、ミックスインの使用を検討してください。

@mixin link-with-color($color: red) {
  a {
    color: $color; } }

#header {
  @include link-with-color(blue); }

.cart-item {
  @include link-with-color(green); }
于 2013-03-29T16:57:46.903 に答える