scss/sassの末尾にアンパサンドを使用して1つのレベルをターゲットに戻す

Question

私は円の種類が.poi.licensed、.poi.unlicensedの2種類あります。 .poi.unlicensedの.circleが$turqoiseではなく$tangerineの境界を持つようにしています。このような状況で、どうやって末尾のアンプルを使うことができますか？私が除外している他の多くのscssが無関係なので、この一般的な構造にとどまらなければならないことに注意してください。

私は、次の線に沿って何かをしようとしていたが、それは私が開始するために、@at-rootを使用していた私は、このblogで見つかったトリックを使用して終了.unlicensed #licensed-v-unlicensed .poi .circle {}

$turqoise: #40e8e3; 
$tangerine: #ffa975; 
#licensed-v-unlicensed { 
    .poi { 
     .circle { 
      border: 5px solid transparentize($turqoise, 0.1); 
      .unlicensed & { 
       border: 5px solid transparentize($tangerine, 0.1); 
      } 
      @include breakpoint(medium up) { 
       border-width: 10px; 
      } 
      border-radius: 50%; 
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); 
      width: 100%; 
      height: 100%; 
      position: relative; 
      cursor: pointer; 
     } 
    } 
} 

Answer 1

にコンパイルクラスをターゲットにして.unlicensedクラスをターゲットにします。私が望んでいたよりもはるかに多くの作業ですが、これまでに唯一の解決策が見つかりました。

$turqoise: #40e8e3; 
$tangerine: #ffa975; 
#licensed-v-unlicensed { 
    .poi { 
     .circle { 
      border: 5px solid transparentize($turqoise, 0.1); 
      @at-root #licensed-v-unlicensed .poi.unlicensed .circle { 
       border: 5px solid transparentize($tangerine, 0.1); 
      } 
      @include breakpoint(medium up) { 
       border-width: 10px; 
      } 
      border-radius: 50%; 
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); 
      width: 100%; 
      height: 100%; 
      position: relative; 
      cursor: pointer; 
     } 
    } 
}