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?

Mr. Alien · Accepted Answer · 2017-07-03 08:53:18Z

2

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%;
    }
  }
}

answered Jul 3, 2017 at 8:53

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Troyer · Accepted Answer · 2017-07-03 08:53:44Z

1

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%;
}

answered Jul 3, 2017 at 8:53

Troyer

7,0814 gold badges37 silver badges64 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related