SCSS Nesting with pseudoelements Sass -
i learning nested concept scss. run problem using pseudoelement in combination of compound selectors.
i have create 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"; } /* class selector appends after before declaration */ body[data-tag="foo"]::before[class] { content: "foo-class"; }
now have wrong before element, because class-attribute after before-element declared.
output of this:
<body class="notice" data-tag="foo"/>
is foo, not foo-class.
i have tried set parent selector after class attribtue in scss file, throws error. set before-element after class attribute, ignored compiler.
is there way achieve nesting?
it looks you'll need split selectors bit:
&[data-tag="foo"]{ &::before { content: "foo"; } &[class]::before { content: "foo-class"; } }
unfortunate, sass doesn't support you're trying do.
Comments
Post a Comment