CODEWITHSUNDEEP
csssassscss-lint
emvidi
emvidi

Reputation: 1310

SASS/SCSS use of ampersand

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>

Upvotes: 1

Views: 259

Answers (1)

emvidi
emvidi

Reputation: 1310

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

Upvotes: 1

Related Questions