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

但是linter抱怨伪元素应该嵌套在它的父类中。我试过这个：

.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

根据Harry建议将伪元素向下移动一级解决了lint警告并且根本不需要＆符号：

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

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

SASS / SCSS使用＆符号

1 个答案: