emvidi emvidi - 10 days ago 7
Sass (Sass) Question

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>

Answer

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