CODEWITHSUNDEEP
csssass
Ehsan Mousavi
Ehsan Mousavi

Reputation: 119

Nested selectors using Sass

How can I have this output using Sass?

.class.active  .class-name1 {}
.class.active  .class-name2 {}

Here is what I tried :

.class {
    &.avtive {
        &-name1 {

        }

        &-name2 {

        }
    }
}

Upvotes: 2

Views: 159

Answers (1)

Alberto Rivera
Alberto Rivera

Reputation: 3752

You need to keep a reference to the outer class name, and interpolate it for your -name classes. Using color: red as an example of the style to apply:

.class {
    $outer-class: &;
    &.active {
        #{$outer-class}-name1 {
          color: red;
        }

        #{$outer-class}-name2 {
          color: red;
        }
    }
}

Upvotes: 2

Related Questions