は、なぜこれが私はこれが動作するように作るしようとしていますと、これはSCSSの特質の一つであるので、私は、なぜ機能していないしていないSCSS

Question

に働いていません。

これはHTMLです：

<div class="btn btn-wrapper"> 
    <div class="btn-container mob-only"> 
     <a class="btn btn-red" href="#" target="_blank"> 
     <span class="mob-only">Schedule Appointment</span> 
     </a> 
    </div> 
</div> 

SCSS：

.btn { 
    &-wrapper { 
     width: 100%; 
     // border: 1px solid red; 
     position: absolute; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: -7vw 0px; 
     &-container { 
      &-red { 
       color: white; 
       background: $red; 
       padding: 10px; 
       width: 85%; 
       border-radius: 0; 
       margin: 10px; 
       font-size: 7vw; 
      } 
     } 
    } 
} 

は私が間違って何をしているのですか？一見

Answer 1

& - paの前に付けるルールにレンタルセレクタ。

ので、

& -containerされます.btn-ラッパーコンテナ

& -Redは、ラッパー、コンテナ.btnされます-wrapperされます.btnラッパー

1. &赤

ネスティングを減らすことで解決できますが、.btn-container内の.btn-redだけを選択したい場合はこれが役に立ちません。最も関連性の高い要素を選択し、あなたは、あなたが親セレクタに変数名を作成し、入れ子の中でそれを割り当てることができているように同じネスティング構造を持つために

。以下の両方のアプローチを追加しました。

アプローチ1

.btn { 
     &-wrapper { 
     width: 100%; 
     // border: 1px solid red; 
     position: absolute; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: -7vw 0px; 
     } 
     &-red { 
     color: white; 
     background: $red; 
     padding: 10px; 
     width: 85%; 
     border-radius: 0; 
     margin: 10px; 
     font-size: 7vw; 
     } 
    } 

アプローチ2

.btn { 
     $root: &; 
     #{$root}-wrapper { 
     width: 100%; 
     // border: 1px solid red; 
     position: absolute; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     margin: -7vw 0px; 
     #{$root}-container { 
      #{$root}-red { 
      color: white; 
      background: 'red'; 
      padding: 10px; 
      width: 85%; 
      border-radius: 0; 
      margin: 10px; 
      font-size: 7vw; 
      } 
     } 
     } 
    } 

Answer 2

、間違った方法であなたのネストされたセレクタ、あなたのコードはbtn-wrapper、btn-wrapper-container、btn-wrapper-container-redのスタイルを生成し、これはbtn-wrapperbtn-containerbtn-redセレクタ生成します。

HTML：

<div class="btn btn-wrapper"> 
    <div class="btn-container mob-only"> 
     <a class="btn btn-container-red" href="#" target="_blank"> 
     <span class="mob-only">Schedule Appointment</span> 
     </a> 
    </div> 
</div> 

SCSSを：

.btn { 
    &-wrapper { 
    width: 100%; 
    // border: 1px solid red; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: -7vw 0px; 
    } 
    &-container { 
    &-red { 
     color: white; 
     background: $red; 
     padding: 10px; 
     width: 85%; 
     border-radius: 0; 
     margin: 10px; 
     font-size: 7vw; 
    } 
    } 
} 

Answer 3

あなたのすべてのセレクタが入れ子になっていると、名前でお互いを拡張しています。あなたのケースでは、3つのクラス.btn,.btn-wrapperおよび.btn-wrapper-container-redを生成しています。

おそらくやって探しています：

.btn { 
    &-wrapper { ... } 
    &-container { ... } 
    &-red { ... } 
} 

これは4つのクラス.btn、.btn-wrapper、.btn-containerと.btn-redを生成します。