SCSSターゲット直下の親

Question

私は整理しようとしている次のscssコードを持っています。

$colors-2: #222; 
$colors-1: #ff0; 

.footer__region { 
    text-align: center; 

    &--country { 
    color: $colors-2; 
    cursor: pointer; 
    display: inline-block; 

    .heading-3 { 
     border-bottom: 2px solid transparent; 

     .active & { 
     border-bottom-color: $colors-1; 
     color: $colors-1; 
     } 
    } 
    } 
} 

私は内部の巣.activeを考えていたと

.footer__region--country.active .heading-3 { 
    border-bottom-color: #ff0; 
    color: #ff0; 
} 

次の出力にした後、&を追加しかし、私ができるようにそれはいないようです。誰かがこれを行うためにあらゆるサスの方法を知っていますか？

注：.footer__region--countryは、.activeが添付され、.heading-3が子供になります。

Answer 1

あなたの例では、@at-root指示と、.a.b{}が.b.a{}と同じものを選択するという事実を利用することができます。このように、クラス名を繰り返す必要はありません。

$colors-2: #222; 
$colors-1: #ff0; 

.footer__region { 
    text-align: center; 

    &--country { 
    color: $colors-2; 
    cursor: pointer; 
    display: inline-block; 

    .heading-3 { 
     border-bottom: 2px solid transparent; 

     @at-root .active#{&} { 
     border-bottom-color: $colors-1; 
     color: $colors-1; 
     } 
    } 
    } 
} 

出力：

.footer__region { 
    text-align: center; 
} 
.footer__region--country { 
    color: #222; 
    cursor: pointer; 
    display: inline-block; 
} 
.footer__region--country .heading-3 { 
    border-bottom: 2px solid transparent; 
} 
.active.footer__region--country .heading-3 { 
    border-bottom-color: #ff0; 
    color: #ff0; 
}