Использование амперсанда SASS/SCSS

Question

У меня возникли трудности с использованием амперсанда. Если я использую это так:

.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.has-error .form--feedback::before { 
    content: '*'; 
} 

но ЛИНТЕР жалуется, что псевдо-элемент должен быть вложен в пределах его родительского класса. Я попытался это:

.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

После Гарри предложение переместить псевдовосточном элемент на один уровень вниз, было устранено предупреждение о поясе и не требуется амперсанд вообще:

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

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