SCSS Nesting with pseudoelements Sass

Question

I am learning the nested concept from SCSS. Now I run into a problem by using a pseudoelement in combination of compound selectors.

I have create this SCSS snippet:

&[data-tag="foo"]::before{
    content: "foo";
    &[class]{
        content: "foo-class";
    }
}

The output CSS file looks this:

body[data-tag="foo"]::before {
  content: "foo"; 
}
/* the class selector appends after the before declaration */
body[data-tag="foo"]::before[class] {
    content: "foo-class"; 
}

Now I have the wrong before element, because the class-attribute is after the before-element declared.
The output of this:

<body  class="notice" data-tag="foo"/>

is foo, not foo-class.

I have tried to set the parent selector after the class attribtue in the scss file, but this throws an error. Also to set a before-element after the class attribute, but this will be ignored by the compiler.

Is there a way to achieve this with nesting?

Scimonster Scimonster · Accepted Answer · 2014-11-19T10:37:09

It looks like you'll need to split up the selectors a bit:

&[data-tag="foo"]{
    &::before {
        content: "foo";
    }
    &[class]::before {
        content: "foo-class";
    }
}

Unfortunate, but SASS doesn't support what you're trying to do.

SCSS Nesting with pseudoelements Sass

1 Answers