较少级联＆amp;重构

Question

我正在尝试重构一些看起来像这样的CSS：

    path.myClass {
       //some CSS
    }
    .someOtherClass.myClass {
      //some other CSS
    }

我正在努力为第一部分找到正确的语法。我想要看起来像这样的东西：

.myClass {
   path.& {
      // some CSS
   }
   .someOtherClass {
      // some other CSS
   }
}

我怎样才能正确地重构这个？

Answer 1

你可以像下面这样做。由于顶级选择器已经有.，因此无需在内部选择器中的父选择器（&）之前再次添加它。第二个是相当简单的，因为您可以在开头或结尾附加父选择器。课程的顺序并不重要。

（注意：父选择器之前应该没有空格，因为它会改变含义。）

.myClass {
  path&{
    color: red;
  }
  .someOtherClass& { /* can do &.someOtherClass also, order doesn't matter */
    color: blue;
  }
}

以下是编译的CSS输出：

path.myClass {
  color: red;
}
.someOtherClass.myClass {
  color: blue;
}