将一个CSS类样式包含到另一个类中

Question

是否可以将一个CSS类的样式包含在另一个类中？我的意思是SASS的@extends基本上也做了类似的事情，但它还会为扩展的类添加样式，这并不是必需的。请参见以下示例：

<style>
.myclass1{
  background:red;
}

.myclass2{
  color:blue;
  @extend .myclass1;
}
</style>

<div>
  <p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
</div>

<div>
  <p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>
</div>

这篇文章的灵感来自于CSS-tricks Web，但是这里一切都很混乱，它并没有像应该的那样工作。根据文章，myclass2应该给出myclass1。然而，它却给出了奇怪的输出。我是在正确的方向上吗？还是文章错了？

更新： 问题只涉及SAAS中@extend实际概念以及将其他CSS类包含到另一个类中的区别是什么？

- Zulqurnain Jutt

---

代码片段中似乎运行良好？ - Lee

你仍然需要编译SASS才能使@extend起作用。 - Josh Crozier

从你链接的文章中可以看到：“最受欢迎的三种CSS预处理器都支持extend”。你没有使用任何预处理器，而是试图将其视为CSS，但它不是。 - Quentin

如果您不想使用预处理器，可以使用PostCSS和https://github.com/jonathantneal/postcss-sass-extend，否则您需要使用预处理器。 - Dan Gamble

Answer 1

CSS无预处理器（如SASS、LESS等）：

.myclass1{
 background:red;
}

.myclass2{
 color:blue;
}

<div>
<p class="myclass1 myclass2">Hello, I am of class 2 (my text is blue) and of class 1 (my background is red)</p>
</div>

<div>
<p class="myclass1">Hello, I am only of class 1 (my background is red)</p>
</div>

您可以为同一个元素添加多个类。

- Rounin - Standing with Ukraine

Answer 2

你可以使用逗号来匹配多个选择器：

.myclass1, .myclass2 {
  background: red;
}
.myclass2 {
  color: blue;
}

<p class="myclass2">Hello i am class 2, my text is blue and background is red</p>
<p class="myclass1">Hello i am class 1, my text should not blue and my background is red</p>

- Oriol

Answer 3

SASS是一种CSS预处理器，基本上意味着SASS语法会被编译成普通的CSS。SASS提供的功能，例如使用@extend以及使用$语法来建立变量等，只有使用SASS才能实现（在CSS3中不可能）。

话虽如此，您可以通过将类链接在一起来在常规CSS中实现SASS的@extend功能，从而达到相同的效果：

.blue, .green {
 <your css here>
}

- Maxwelll