css - 更少的可重用嵌套类

Question

假设我有以下内容:

.class-1 {
  font-weight: bold;
  p{
   color: red;
  }
}

我想在 LESS 中定义一个 class-2，它与 class-1 中的 p 元素具有相同的样式。除了编写代码，还有什么方法可以做到这一点吗？

Answer 1

如果我没理解错的话，如果 p 是 class-1 或 class- 2。但是 class-1 和 class-2 应该有不同的样式。

我建议将其写出两次或采用不同的方法，但如果您不想将其写出两次，则可以使用mixins。

少

.p() {
  color:red;
}

.class-1 {
  font-weight: bold;
  p{
   .p;
  }
}
.class-2{
  p{
    .p;
  }
}

CSS 输出

.class-1 {
  font-weight: bold;
}
.class-1 p {
  color: red;
}
.class-2 p {
  color: red;
}