How to add a "modified" class for an element in SCSS

Question

Given this scss

.root {

  color: red;

  &-child {
    color: blue;

    small & {
      font-size: 80%;
    }

  }

}

This is the CSS I get:

.root {
  color: red;
}
.root-child {
  color: blue;
}
small .root-child {
  font-size: 80%;
}

I want to style .root-child on small differently so the rule I need is:

small.root-child {
  font-size: 80%;
}

(Notice no whitespace after small)

How can I do that?

Answer 1

You need to use @at-root and that will remove the white space in your selector, as well as it will be a valid syntax so no issues while you try to compile.

.root {
  color: red;

  &-child {
    color: blue;

    @at-root small#{&} {
      font-size: 80%;
    }
  }
}

Answer 2

You can use @at-root like this:

SCSS

.root {

  color: red;

  &-child {
    color: blue;

      @at-root {
        small#{&} {
             font-size: 80%;
        }
      }

  }

}

Compiled:

.root {
  color: red;
}
.root-child {
  color: blue;
}
small.root-child {
  font-size: 80%;
}