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 have a period next to the & (&.&). This would produce component..component--modifier, which is incorrect(two periods). What you really want is && but sass doesn't let you do this. What you want to do is escape the second & like this:

&#{&}--modifier

Answer 2

A simpler solution is to interpolate the second & by putting it into #{&}:

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

Note: The dot between the two & is not needed, because & contains it already.

An equivalent mixin related to Densys would be:

@mixin modifier($modifier) {
  &#{&}--#{$modifier} {
    @content;
  }
}

Usage:

.component {
  @include modifier(breadcrumb) {
    // ...
  }
}

Answer 3

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.