CODEWITHSUNDEEP
csssass
ReactionJackson
ReactionJackson

Reputation: 41

Using SASS & to target a second class of a parent

Here is my code:

.grid {

    > li {

        // li styles

        .text & {

            // new li styles if .grid also has a class of .text
        }
    }
}

This is wrong, it seems to only work if I target something higher than .grid, but I want to be able to target .grid.text li {} so I can change the li styles based on if the .grid has an extra class, not depending on what .grid lives inside. Is this possible?

I'm trying to avoid doing this:

.grid {

    > li {

        // li styles
    }

    &.text {

        li {

            // new li styles
        }
    }
}

Upvotes: 2

Views: 413

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could do it using the @at-root directive while mantaining the rules nested

e.g. this snippet

.grid {
    > li {
        color: #fff;

        @at-root {
          .text#{&}  {
              color: #000;
          }
        }

    }
}

on SASS >= 3.3 compiles into

.grid > li {
  color: #fff;
}
.text.grid > li {
  color: #000;
}

Upvotes: 1

Related Questions