1

アンパサンドの使用に問題があります。このように使用すると：

.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>
4

1 に答える 1

1

疑似要素を 1 レベル下に移動するという Harry の提案に従って、糸くずの警告が解決され、アンパサンドはまったく必要ありませんでした。

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

  //.form--feedback::before {content: '*';} // before had a warning
  // after
  .form--feedback {
    &::before {content: '*';}
  }
}
于 2016-11-28T15:45:10.923 に答える