sass Extending the parent


Example

Typically trying to extend the parent like so:

.parent {
  style: value;

  @extend &;
}

Will result in an error, stating that the parent cannot be extended. This makes sense, but there's a workaround. Simply store the parent selector in a variable.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

There's no benefit to doing this in the above example, however this gives you the power to wrap parent styles from within an included mixin.