使用＆符號的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: '*';} 
    } 
}