1

I am having some difficulties using the ampersand. If I use it like this:

.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

then I am achieving what I want, which is: 

.form-standard .form--group.has-error .form--feedback::before {
  content: '*';
}

but the linter complains that pseudo-element should be nested within its parent class. I tried this:

.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

but the outcome it is not what I want:

.has-error .form-standard .form--group .form--feedback::before {
  content: '*';
}

This is the HTML:

<form class="form form-standard" role="form">

  <div class="form--group">
    <label>category</label>
    <input id="category" type="text" name="category">
  </div>

</form>
emvidi
  • 1,210
  • 2
  • 14
  • 18
  • 2
    Honestly, I can't understand why the lint would complain about this but did you try by doing `.form--feedback { &::before {content: '*';}}` in the first version of your code? – Harry Nov 28 '16 at 15:01
  • I need the "*" before only when .form--feedback.has-error. When .form--feedback.has-info for example, should be without the "*". Thanks for looking at the code. – emvidi Nov 28 '16 at 15:05
  • I understand. I am not asking you to change anything in your original code, just an extra nest of moving the pseudo-element one level down. – Harry Nov 28 '16 at 15:06
  • Please post an answer with some code, I am open to change the code, no problem there – emvidi Nov 28 '16 at 15:08
  • I am just giving a suggestion, I don't have a concrete answer to post as such. I've never seen such an error before. – Harry Nov 28 '16 at 15:14
  • Harry, there is no error, is a warning. The first version of the code is ok with a warning. I was wondering if there is a better way to get rid of the warning. – emvidi Nov 28 '16 at 15:17

1 Answers1

1

Following Harry suggestion to move the pseudo element one level down solved the lint warning and didn't needed the ampersand at all: 

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

  //.form--feedback::before {content: '*';} // before had a warning
  // after
  .form--feedback {
    &::before {content: '*';}
  }
}
emvidi
  • 1,210
  • 2
  • 14
  • 18