Question

这是一个基本示例，但我想将一个类添加到嵌套子级中的父级。

所需的CSS：

.addon .checkbox { background: blue; }
.addon.active .checkbox { background: red; }

使用SASS

 .addon {
       .checkbox { 
         background: blue; 
         .active & { background: red }
         .addon.active & { background: red }
       }
 }

这给了我以下内容：

.addon .checkbox {
  background: blue;
}
.active .addon .checkbox {
  background: red;
}
.addon.active .addon .checkbox {
  background: red;
}

正如您所看到的，我无法使用＆amp;符号。我可以使用嵌套来做我想做的事情，还是我必须使用普通的css方式写出来。

已经回答了：

.addon {
    .checkbox { 
       background: blue; 
       @at-root #{selector-replace(&, '.addon', '.addon.active')} {
          background: red;
       }
   } 
}

Answer 1

您正在寻找的是

.addon {
  .checkbox {...}

  &.active {
    .checkbox {...}
  }
}

可悲的是，编写像这样的选择器并没有简短的形式。

如何使用SASS将类添加到嵌套子级的父级？

1 个答案: