SASS/SCSSアンパサンドの使用

Question

アンパサンドを使用する際にいくつかの問題があります。私はこのようにそれを使用する場合：

.form-standard .form--group.has-error .form--feedback::before { 
    content: '*'; 
} 

が、リンターは擬似要素は、その親クラス内でネストされなければならないと文句を言い：

.form-standard { 
    ... 
    .form--group { 
    &.has-error { 
     border-color: $form-error-color; 
     color: $form-error-color; 

     .form--feedback::before {content: '*';} // <-- here 

     &.has-focus { 
     box-shadow: inset 0 1px 3px rgba(#000, 0.06), 0 0 5px rgba($form-error-color, 0.7); 
     color: $form-error-color; 
     }// has-focus 

    }// has-error 
    }// form--group 
}// form-standard 

、私はどれがある、私が欲しいものを実現しています。私はこれを試してみました：

.form-standard { 
    ... 
    .form--group {  
    .form--feedback { 
     clear: left; 
     font-size: 12px; 
     margin: 0; 
     padding: 0; 
     padding-left: 5px; 

     .has-error & {    // 
     &::before {content: '*';} // produces same output 
     }       // 

     &::before {     // 
     .has-error & {content: '*';} // produces same output 
     }        // 
    }// form--feedback 
    }// form--group 
}// form-standard 

しかし、結果、それは私が欲しいものではありません。

.has-error .form-standard .form--group .form--feedback::before { 
    content: '*'; 
} 

これはHTMLです：

<form class="form form-standard" role="form"> 

    <div class="form--group"> 
    <label>category</label> 
    <input id="category" type="text" name="category"> 
    </div> 

</form> 

Answer 1

擬似要素を1つのレベルを移動するには、ハリーの提案に続きリントの警告を解決し、アンパサンドをまったく必要としませんでした。

&.has-error { 
    border-color: $form-error-color; 
    color: $form-error-color; 

    //.form--feedback::before {content: '*';} // before had a warning 
    // after 
    .form--feedback { 
    &::before {content: '*';} 
    } 
}