Error on & with attribute selector in SCSS

Question

SCSS code: .parent-class { &[dir='rtl'] { &__cta { p { margin-left: 6px; margin-right: initial; } } } }

Error: sass error Invalid parent selector "[dir=rtl]"

&[dir='rtl'] { &__cta { p {

Answer 1

The error gives you a hint:

.parent-class {
    &[dir='rtl'] {
        &__cta {
            p {
                margin-left: 6px;
                margin-right: initial;
            }
        }
    }
}

This selector is invalid because it would compile to:
.parent-class[dir='rtl']__cta

Depending on your markup, you might want to write it like that:

 .parent-class {
     $root: &;
     
     &[dir='rtl'] { 
         & #{$root}__cta { 
             p { 
                 margin-left: 6px; 
                 margin-right: initial; 
             } 
         } 
     } 
 }

That would compile to:
.parent-class[dir=rtl] .parent-class__cta p