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

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

<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类到另一个，而且有什么区别？

来源

2016-02-05 Zulqurnain Jutt

似乎在代码片段中工作正常？ – Lee

......你仍然需要编译SASS才能使'@ extend'工作。 –

从您链接到的文章：*所有三个最流行的CSS预处理器支持扩展*。你没有使用任何预处理器，你试图把它当作CSS，而不是。 – Quentin

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

.myclass1{ 
 
\t background:red; 
 
} 
 

 
.myclass2{ 
 
\t 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>

您可以将多个类添加到相同的元素。

来源

2016-02-05 15:23:42 Rounin

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

话虽这么说，你将能够完成@extend功能的结果上海社会科学院在常规CSS简单地通过链接一起上课：

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

来源

2016-02-05 15:24:03 Maxwelll

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

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

来源

2016-02-05 15:26:24 Oriol

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

回答

相关问题