CODEWITHSUNDEEP
csssass
haki
haki

Reputation: 9779

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?

Upvotes: 1

Views: 172

Answers (2)

Troyer
Troyer

Reputation: 7013

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

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157414

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

Upvotes: 2

Related Questions