通过@Extend在SASS中的继承的好处-css教程-PHP中文网

首页

web前端

css教程

通过@Extend在SASS中的继承的好处

Joseph Gordon-Levitt

Feb 22, 2025 am 10:07 AM

通过@Extend在SASS中的继承的好处

钥匙要点

SASS的@Extend功能允许类互相共享属性，简化了CSS样式表的组织，并使大型网站更易于风格。
对于尚未探索Sass的人来说，这是CSS的扩展。它为我们提供了本机CS中不存在的功能，例如表达式，变量，嵌套，Mixins（Sass的函数名称），继承等等。在本文中，我将使用@Extend概述Sass中的继承。我将介绍此功能在自己的项目中使用时带来的优势和经验。重要的是要注意，@Extend可能会被滥用，雨果·吉罗（Hugo Giraudel）在Sitepoint上甚至写了一篇文章，说明了为什么您应该避免使用Sass @extend。因此请注意，@Extend可能是一个有争议的主题。
观看此课程观看此课程在以下示例中，我将使用SCSS语法。这是包含CSS的所有功能和结构的语法，并具有SASS的其他功能。

@Extend是SASS的功能，允许类彼此共享一组属性。 SASS中@Extend class的选择器将在其延伸的类旁边包含其选择器，从而导致逗号分隔的列表。>

它的语法看起来像：

>用法

使用@extend看起来像：

这是：

在上面的示例中，我定义了.foo和.bar，它们具有以下功能：>

.bar从.foo继承，包含父级的所有属性.foo。
.bar通过添加属性背景色来扩展.foo。

知道基础知识，我们现在将查看一些用例

使用@extend

>用例1：重复

在组合CSS时，很难避免

重复类之间的属性。这可以使您的样式表更加复杂。例如：

正如我们在上面的示例中所看到的。farkfast，。-ornunch和.dinner包含具有相同值的属性，边框，盒子阴影，边距和填充物。这些属性是重复的，使我们的代码看起来很混乱，所以让我们用@Extend重写：

<span><span>@extend .class-name;</span></span>

在上面重写的CSS中，我们可以看到，使用SASS可以帮助单独使用SASS更加干净。

请参阅codepen上的SCSS（@sitepoint）中SCSS中属性的笔复制。

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

案例2：将多个类移出HTML

通常在设计一个页面时，通常会有一个类别具有另一个类的所有样式的情况。我们经常通过在html中使用多个类名来处理这种情况。

我们的CSS看起来像：

我们的html for tht css：

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

在上面的示例中，我们的

中有两个类。想象一下，如果我们有几个课程，这将是多么混乱：

<span><span>.breakfast</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span>background-color: yellow;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span>background-color: orange;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}</span>

上面的HTML代码可能变得非常复杂。一些网络开发人员喜欢这种方式，但是我更喜欢在我的Sass样式中继承：>

现在，我们的HTML看起来像：

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

这次我们只需要一个类。班级定义的所有样式也适用于class .strawberry-candy，现在我们的html代码变得更加干净。

>请参阅codepen上的@extend（@sitepoint）的pen将多个类移出html。

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

<span><span><span><div> class<span>="candy strawberry-candy"</span>>
  This is the strawberry candy!
<span><span><span></span></span></span>
</div></span>></span></span>

案例3：扩展复杂的选择器

类选择器并不是唯一可以扩展的东西。我们还可以将复杂的选择器扩展到一个元素中，例如：悬停，.parentClass.ChildClass等。例如：

这是：

然后我们可以在HTML中使用的

>：

<span><span><span><div> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>>
  This is just an example
<span><span><span></span></span></span>
</div></span>></span></span>

>请参阅codepen上的@extend（@sitepoint）的@extend的复杂选择器。

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

@extend

的优势

<span><span><span><div> class<span>="strawberry-candy"</span>>
  This is the very sweet candy!
<span><span><span></span></span></span>
</div></span>></span></span>

>浏览上面的示例，我们可以通过@Extend看到继承的几个优势。这些包括：

清洁器HTML类

正如您在第二个案例研究中可以看到的那样，在一个元素中使用如此多的类，如果您遇到问题，则很难确定根本原因。 HTML标签的结构也看起来不太好且干净。

> 从我的角度来看，在制作好产品时，我们不仅要考虑最终用户的观点，而且还要考虑我们开发策略的质量。因此，@Extend帮助我们在每个HTML元素中以更干净的方式构造我们的课程。>

降低CSS

的重复在Web开发中，我们在CSS样式中始终有一些重复。因此，重复使用书面CSS源代码可能是非常必要的。 @Extend可以帮助我们在适当且更清洁的情况下重复使用CSS。

节省时间和精力

有两个上述优势，开发人员可以在开发过程中节省时间和精力。

>开发人员可以将CSS重复使用各种元素，减少找到CSS问题根本原因并使CSS结构良好而干净的工作所需的精力。

> 但是，使用@Extend并非没有危险。仅当仔细使用@Extend时，上述优势仅适用 - 可以过度使用 @extend，从而导致相反的效果。

@extend

的危险

>我已经在自己的项目中应用@Extend，使用@Extend时需要谨慎。你必须小心。

@Extend可以大大增加您的CSS文件大小，并在不小心使用时会影响CSS的性能。在这样的情况下，我感到痛苦，花了很多时间重构我的Sass使用@Extend。这是我最初错误地使用@Extend的一个示例：

>示例：

被编译为：

在此示例中，.base-css是一个基于它的许多继承类的类。如果您查看示例，您可以看到继承的类无关。我的按钮和.btn为我的页脚提供了.btn。如果我有100个从.BASE-CSS继承的类，则具有.base-CSS特性的选择器将增加。这显着，不必要地使我们的CSS最终结果复杂化。此外，这使得检查每个选择器的属性更加困难。

>重新分解我的sass后，我意识到只有在继承类直接与我们继承的对象有关时，我们才应该使用@Extend。它应该是对象或样式的变体，而不是许多无关元素的笼统规则。为了像我上面的示例一样继承，我们应该依靠CSS现有的功能将我们的样式级联到子元素中。

<span><span>@extend .class-name;</span></span>

被编译为：

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

<span><span>@extend .class-name;</span></span>

>我们可以看到上面的示例更为正确和合理。我们通过仅将@Extend应用于应该彼此继承的类，从而降低了范围，这是由于一种类型的对象的变体。例如，以上样式都与不同类型的按钮有关。

结论

SASS是一个有价值的扩展，可以改善我们的CSS，以使其更清洁，结构良好，有条理且易于开发和维护。如果您以前没有尝试过Sass，我强烈建议您使用它。当您对Sass的基础知识更加满意时，我们建议阅读Hugo Giraudel的Sitepoinp文章，介绍没人告诉您Sass的@Extend。我们在SitePoint的Sass参考中也有整个SASS参考指南，并提供大量示例供您探索。

谢谢史蒂夫（Steve）和以西结（Ezekiel）在该帖子的第一个版本中提出错误的评论中，此后已更新。 >通过SASS 中的扩展的继承的常见问题（常见问题解答）

>在sass中使用@Extend的主要优点是什么？它使类能够继承另一个类的样式，从而减少了编写重复代码的需求。这不仅使代码更具可读性，而且还可以减少文件大小，从而可以改善网页的负载时间。

> @extend与sass的@mixin有何不同？ @Extend和@mixin在SASS中允许可重复使用代码，它们以不同的方式工作。 @Extend允许选择器继承另一个选择器的样式，而@mixin包含一系列样式，可以在整个样式表中重复使用。关键区别在于，@extEnd会生成更少的CSS输出，因为IT将选择器与相同样式组合在一起，而@mixin可以导致更多的CSS输出，因为每次包含它时都会复制样式。 @Extend在SASS中使用复杂的选择器？

是的，您可以在sass中使用@Extend使用@Extend。但是，重要的是要注意，@Extend只能与同一文件中存在的选择器一起使用。它不会与在不同文件或@mixin或函数生成的选择中定义的选择器一起使用。

>为什么在sass中使用@Extend在媒体查询中使用@extend时会遇到错误？>我可以在sass中的嵌套规则中使用@extend？但是，重要的是要注意，扩展的选择器将被插入样式表的顶级，而不是嵌套规则范围内。这是因为SASS遵循CSS规则，所有选择器都必须位于文档的最高级别。>

>我如何避免“仅在规则中使用扩展指令” SASS中的错误？ 🎜>当您尝试在SASS中使用@Extend之外使用@Extend时，会发生此错误。为避免此错误，请确保您在规则集中使用@Extend。例如，您不应该写“ @extend .class;”，而应写入.new-class {@extend .class; }。但是，重要的是要注意，@Extend只会扩展伪级的样式，而不是伪级本身。这意味着，如果您使用“ @extend：hover;”，它不会为选择器添加悬停效果，而是会扩展：悬停伪class的样式。