sassscss-mixinsscss-lint

Error on & with attribute selector in SCSS


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 {


Solution

  • 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