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: '*';}
  }
}