サス条件アンパサンド

Question

私は.activitiesクラスを持つ親要素は、クラス.eventsを持っていない場合にのみ、黄色にする最初の子である.activity要素をしたい

.activities { 
    border: 1px solid green; 

    .activity { 
    background-color: red; 

    &:first-child { 
     background-color: yellow; 
    } 
    } 
} 

次のようになり、いくつかのSASSを持っています。

以下の例では、最初の.activity要素がbackground-color: red

<div class="activities events"> 
    <div class="activity">one</div> 
    <div class="activity">two</div> 
    <div class="activity">three</div> 
</div> 

が.activitiesを持つ要素も.eventsを持っているときに、この第一子のスタイルを否定するDRY方法はあります持っている必要がありますか？

またはこれが最も簡単な方法です：

.events .activity:first-child { 
    background-color: red; 
} 

Answer 1

活動要素は、イベントのクラスを持っていないとき黄色の背景を適用するには:notセレクタを使用してください。

.activities { 
    border: 1px solid green; 

    .activity { 
     background-color: red; 
    } 

    &:not(.events) { 
     .activity:first-child { 
      background-color: yellow; 
     } 
    } 
} 

このメソッドは、重複を減らすのに役立ちます。突然活動が赤色ではなく青色であると判断した場合は、2つではなく1か所で変更するだけです。

https://developer.mozilla.org/en/docs/Web/CSS/:not

Answer 2

私は退屈だったと私はちょうど1 activity子内のすべてのactivityスタイルを保つことができるかどうかを確認したかったし、この思い付いた - 私はネイサンの答えの上にこれを使用することをお勧めしませんが、このため、本当に無意味なオーバーザトップソリューションです：

.activities { 
    border: 1px solid green; 

    .activity { 
    background-color: red; 

    &:first-child { 
     @at-root #{selector-replace(&, '.activities', '.activities:not(.events)')} { 
     background-color: yellow; 
     } 
    } 
    } 
} 

そして、あなたは「活動」クラスを繰り返したくなかった場合、あなたは変数としてそれをキャッシュできます。

.activities { 
    $this: &; 

    border: 1px solid green; 

    .activity { 
    background-color: red; 

    &:first-child { 
     @at-root #{selector-replace(&, $this, '#{$this}:not(.events)')} { 
     background-color: yellow; 
     } 
    } 
    } 
} 

Sassが遠すぎますか？