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

错误提示：

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

此选择器无效，因为它会编译为：
.parent-class[dir='rtl']__cta

根据您的标记，您可能希望这样写：

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

将编译为：
.parent-class[dir=rtl] .parent-class__cta p