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

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -