haki haki - 11 months ago 47
CSS Question

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

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 Source

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%;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download