SASS/SCSS does not accept &.&

Question

Inside my component I'd like to add a modifier, which should have a higher specification so my output should look like this:

Wanted output:

.component {
  // ...
}

.component.component--modifier {
  // ...
}

SCSS Suggestion:

.component {
  // ...
  &.&--modifier {
    // ...
  }
}

But this does not work, I'm getting compile errors: Kind of "format errors" or "invalid CSS".

Answer 1

You could define a mixin:

@mixin mod($n) {
  .#{$n} {
      color: blue;
  }
  .#{$n}.#{$n}--modifier {
       color: red;
  }
}
@include mod(component);

Output:

.component {
  color: blue;
}

.component.component--modifier {
  color: red;
}

But there's probably a more raisonnable approach to your real problem, like having a modifier class.