Question

是否可以将一个css类的样式包含到另一个？我的意思是SASS @extends 几乎做了类似的事情，但它也设置了扩展类，这不是必需的。见例：

＆＃13;

<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>

＆＃13;

发布的示例受到CSS-tricks Web文章的启发，但是这里的一切都非常令人困惑，它无法正常工作。根据文章， myclass2 应该提供 myclass1 。但是，它给出了奇怪的输出。我正朝着正确的方向前进吗？或者文章错了吗？

更新问题只是关于SAAS的 @extend 背后的实际概念，并将其他CSS类包含在另一个中，有什么区别？

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>

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

SASS是一个CSS预处理器，它基本上意味着SASS语法被编译成纯CSS。 SASS提供的功能如@extend以及使用$语法等建立变量只能使用SASS（CSS3不可能）

话虽如此，您只需将类链接在一起，就可以在常规CSS中完成SASS @extend功能的结果：

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

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

3 个答案: