In sass can I have &x&y&z

Question

In sass I want to do

asdf{
   &-b&-c {font-size: 16px;}
}

For the css generated to be

asdf.asdf-b.asdf-c{
   font-size: 16px;
}

Is this possible to do in sass? Or am I going to have to write out to parent element multiple times

Answer 1

You can use mixins:

@mixin fontSize($selector) {
  .#{$selector}.#{$selector}-b.#{$selector}-c {
    font-size: 16px;
  }
}

@include fontSize("asdf");

Result

.asdf.asdf-b.asdf-c {
  font-size: 16px;
}

Answer 2

If you were using Less the syntax would be:

.asdf {
  &&-b&c {
    font-size: 16px;
  }
}

However, Sass doesn't allow for & to be directly joined with another & in the same selector. Instead, reuse must make use of interpolation (#{...}):

.test {
  &#{&}-b#{&}-c {
    font-size: 16px;
  }
}