PreFiXAUT PreFiXAUT - 12 days ago 5
CSS Question

Expand previous path in SASS

I have a little issue with paths/selectors in Sass right now.
I got something like this:

&.foo {
some-stuff .class,
some-stuff ul,
other-stuff .all {
color: red;
}
}


Now I'd like to make the color blue when the first path is &.foo.bar for example:

&.foo {
some-stuff .class,
some-stuff ul,
other-stuff .all {
color: red;
// This obviously doesn't work, it's just here to show
// what I want to do easier
&.bar {
color: blue;
}
}
}

// Compile to

.foo some-stuff .class,
.foo some-stuff ul,
.foo other-stuff .all {
color: red;
}

.foo.bar some-stuff .class,
.foo.bar some-stuff ul,
.foo.bar other-stuff .all {
color: blue;
}


Is there any way to accomplish that?

I tried to use variables to store the current selector with the selector-parse Function but it didn't work out like I wanted it. Thanks in advance

Answer

You can use the selector-replace function instead of the selector-parse function to replace the .foo with .foo.bar in the full parent selector.

div{
  &.foo {
    some-stuff .class,
    some-stuff ul,
    other-stuff .all {
      color: red;
      @at-root #{selector-replace(&, '.foo', '.foo.bar')} {
        color: blue;
      }
    }
  }
}

When compiled, it would result in the following CSS:

div.foo some-stuff .class,
div.foo some-stuff ul,
div.foo other-stuff .all {
  color: red;
}
div.foo.bar some-stuff .class, 
div.foo.bar some-stuff ul, 
div.foo.bar other-stuff .all {
  color: blue;
}
Comments