sass extend_在Sass中通过@extend继承的好处

sass extend

Organizing CSS stylesheets has become crucial to styling large scale websites effectively, but stylesheets in our projects have been getting larger, more complex and harder to maintain as they develop. This is where Sass comes in to make everything simpler.

组织CSS样式表对于有效地设计大型网站至关重要，但是随着项目的发展，我们项目中的样式表变得越来越大，越来越复杂并且难以维护。 这是Sass进来的地方，它使一切变得更简单。

For those who have yet to explore Sass, it is an extension of CSS. It provides features for us that do not exist in native CSS such as expressions, variables, nesting, mixins (Sass’ name for functions), inheritance, and more.

对于尚未探索Sass的人，它是CSS的扩展。 它为我们提供了本机CSS中不存在的功能，例如表达式，变量，嵌套，mixins(Sass的函数名称)，继承等。

In this article I’m going to give an overview of inheritance in Sass using @extend. I’ll cover the advantages this feature brings and my experiences when using it in my own projects. It is important to note that @extend can be misused, Hugo Giraudel here at SitePoint even wrote a piece on Why You Should Avoid Sass @extend. So be aware that @extend can be a contentious subject.

在本文中，我将使用@extend概述Sass中的继承。 我将介绍该功能带来的优势以及在我自己的项目中使用它的经验。 重要的是要注意@extend可能会被滥用，SitePoint的Hugo Giraudel甚至写了一篇关于为什么应该避免Sass @extend的文章 。 因此，请注意@extend可能是一个有争议的主题。

In the following examples, I will use the SCSS syntax. This is the syntax which contains all the features and structure of CSS, with Sass’ additional features.

在以下示例中，我将使用SCSS语法。 这是语法，包含CSS的所有功能和结构，以及Sass的其他功能。

什么是@extend ？ (What is @extend?)

@extend is a feature of Sass that allows classes to share a set of properties with one another. Selectors that @extend a class in Sass will have their selector included right up next to the class it is extending, resulting in a comma separated list.

@extend是Sass的一项功能，它允许类彼此共享一组属性。 在Sass中@extend类的选择器将在其扩展的类旁边添加选择器，从而产生一个逗号分隔的列表。

Its syntax looks like so:

其语法如下所示：

@extend .class-name;

用法 (Usage)

Using @extend looks like so:

使用@extend看起来像这样：

.foo {
  color: black;
  border: 1px solid black;
}

.bar {
  @extend .foo;
  background-color: red;
}

This is compiled to:

编译为：

.foo, .bar {
  color: black;
  border: 1px solid black;
}

.bar {
  background-color: red;
}

In the example above, I defined .foo and .bar which have the following features:

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

• .bar inherits from .foo, containing all properties of parent class .foo.

  .bar从.foo继承，包含父类.foo所有属性。

• .bar extends .foo by adding the property background-color.

  .bar通过添加属性background-color扩展了.foo 。

Knowing the basics, we will now look at some use cases for @extend.

了解了基础知识之后，我们现在来看一下@extend一些用例。

使用@extend (Using @extend)

用例1：复制 (Use Case 1: Duplication)

Duplication of properties between classes is hard to avoid when putting together CSS. This can make your stylesheets more complicated. For example:

将CSS放在一起时，很难避免类之间的属性重复。 这会使您的样式表更加复杂。 例如：

.breakfast {
  color: #333;
  border: 1px solid #bbb;
  box-shadow: 1px 1px 0 #ddd;
  margin: 0 0 10px;
  padding: 15px;
}

.lunch {
  background-color: yellow;
  color: #333;
  border: 1px solid #bbb;
  box-shadow: 1px 1px 0 #ddd;
  margin: 0 0 10px;
  padding: 15px;
}

.dinner {
  background-color: orange;
  color: #333;
  border: 1px solid #bbb;
  box-shadow: 1px 1px 0 #ddd;
  margin: 0 0 10px;
  padding: 15px;
}

As we can see in the example above, .breakfast, .lunch and .dinner contain the properties color, border, box-shadow, margin and padding with the same values. These properties are duplicated, making our code look messy, so let’s rewrite it with @extend:

如上例所示， .breakfast ， .lunch和.dinner包含属性color ， border ， box-shadow ， margin和padding具有相同的值。 这些属性是重复的，使我们的代码看起来很凌乱，所以让我们用@extend重写它：

.meal-box {
  color: #333;
  border: 1px solid #bbb;
  box-shadow: 1px 1px 0 #ddd;
  margin: 0 0 10px;
  padding: 15px;
}

.breakfast {
  @extend .meal-box;
}

.lunch {
  @extend .meal-box;
  background-color: yellow;
}

.dinner {
  @extend .meal-box;
  background-color: orange;
}

In the rewritten CSS above, we can see that using Sass helps our markup become cleaner than CSS alone.

在上面重写CSS中，我们可以看到使用Sass可以使我们的标记变得比单独CSS更干净。

See the Pen Duplication of Properties in SCSS by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint ) 在SCSS中的钢笔复制 。

情况2：将多个类移出HTML (Case 2: Moving Multiple Classes out of HTML)

There are often cases when designing a page when one class should have all the styles of another class. We often handle this case by using multiple class names in the HTML.

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

Our CSS would look like so:

我们CSS看起来像这样：

.candy {
  background-color: black;
  border: 1px solid red;
  box-shadow: 1px 1px 0 #ddd;
  padding: 15px;
}

.strawberry-candy {
  background-color: #ff6666;
  color: white;
}

Our HTML for that CSS:

该CSSHTML：

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

In the example above, we have two classes in our <div>. Imagine how messy this would be if we had several classes:

在上面的示例中，我们的<div>有两个类。 想象一下，如果我们有几个班级，这将是多么混乱：

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

The HTML code above could become quite complex. Some web developers prefer it this way, however I prefer inheritance in my Sass styles:

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

.candy {
  background-color: black;
  border: 1px solid red;
  box-shadow: 1px 1px 0 #ddd;
  padding: 15px;
}

.strawberry-candy {
  @extend .candy;
  background-color: #ff6666;
  color: white;
}

With our HTML now looking like so:

现在我们HTML看起来像这样：

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

This time we only need one class. All styles defined for class .candy are also applied to class .strawberry-candy, now our HTML code becomes cleaner.

这次我们只需要一堂课。 为.candy类定义的所有样式也都适用于.strawberry-candy类，现在我们HTML代码变得更加整洁。

See the Pen Moving Multiple Classes out of HTML with @extend by SitePoint (@SitePoint) on CodePen.

见笔移动多个班列HTML与@extend由SitePoint( @SitePoint上) CodePen 。

情况3：扩展复杂的选择器 (Case 3: Extending complex selectors)

Class selectors are not the only things that can be extended. We can also extend complex selectors into a single element, such as a:hover, .parentClass.childClass and so on. For example:

类选择器不是唯一可以扩展的东西。 我们还可以将复杂的选择器扩展为单个元素，例如a:hover ， .parentClass.childClass等。 例如：

.example {
  color: black;
}

.example:hover {
  color: red;
}

.hover-link {
  @extend .example:hover;
}

This is compiled to:

编译为：

.example {
  color: black;
}

.example:hover, .hover-link {
  color: red;
}

Which we can then use in our HTML like this:

然后我们可以在HTML中像这样使用它：

<p>This is an example sentence with <a class="example">a sample link</a>
that should have a typical hover style.</p>
<p>This is another sentence, this time with 
<a class="hover-link">an eternally hovered link</a>.</p>

See the Pen Extending complex selectors with @extend by SitePoint (@SitePoint) on CodePen.

请参见在CodePen上使用SitePoint( @SitePoint )的@extend 扩展 Pen 选择器 。

@extend优点 (Advantages of @extend)

Walking through the examples above, we can see several advantages of inheritance via @extend. These include:

通过上面的示例，我们可以通过@extend看到继承的几个优点。 这些包括：

更干净HTML类 (Cleaner HTML Classes)

As you can see in the second case study, using so many classes in one element may make it hard to determine the root cause if you run into issues. The structure of HTML tags also does not look very nice and clean.

正如您在第二个案例研究中所看到的，在一个元素中使用这么多的类可能会使您难以确定根本原因(如果遇到问题)。 HTML标记的结构看起来也不是很干净。

From my point of view when making a good product, we consider not only the perspective of end-user but also the quality of our development strategy. Therefore, @extend helps us structure our classes in a cleaner way within each HTML element.

从我的观点来看，制作优质产品时，我们不仅要考虑最终用户的角度，还要考虑我们开发策略的质量。 因此， @extend帮助我们在每个HTML元素内以更@extend方式构造类。

减少CSS重复 (Reducing Duplication of CSS)

In web development, we always have some duplication within our CSS styles. Hence, reusing written CSS source code can be extremely necessary. @extend can help us reuse our CSS when it is appropriate and cleaner to do so.

在Web开发中，我们CSS样式中总是有些重复。 因此，重用书面CSS源代码非常有必要。 @extend可以在适当@extend下帮助我们重用CSS。

节省时间和精力 (Saving time and effort)

With the two aforementioned advantages, developers can save time and effort whilst developing.

利用上述两个优点，开发人员可以在开发时节省时间和精力。

Developers can reuse CSS for various elements, reducing the effort needed to find the root cause of CSS issues and making their CSS structure nice and clean.

开发人员可以将CSS重用于各种元素，从而减少查找CSS问题根本原因所需的工作，并使CSS结构简洁美观。

However, using @extend is not without its dangers. The above advantages only apply when @extend is used carefully — it can be overused causing the opposite effect.

但是，使用@extend并非没有危险。 以上优点仅在@extend使用@extend时才适用-可能会过度使用@导致相反的效果。

@extend的危险 (The Dangers of @extend)

I have applied @extend in my own projects and I need to provide a word of caution when using @extend. You have to be careful.

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

@extend can increase your CSS file size drastically and impact the performance of your CSS when used without care. I had my share of pain in a situation just like this and spent lots of time refactoring my Sass’ use of @extend. Here is an example of how I initially used @extend incorrectly:

@extend会大大增加CSS文件的大小，并且在不加保护的情况下影响CSS的性能。 在这种情况下，我有些痛苦，并花了很多时间来重构Sass对@extend的使用。 这是我最初不正确使用@extend的示例：

Example:

例：

.base-css {
   color: red;
   font-size: 15px;
   font-weight: bold;
 }

 .btn {
   @extend .base-css;
   padding: 5px;
 }

 .warning-message {
   @extend .base-css;
   background-color: red;
 }

 .footer {
   @extend .base-css;
   color: #fff;
 }

 .content {
   @extend .base-css;
   margin: 10px;
 }

is compiled to:

编译为：

.base-css, .btn, .warning-message, .footer, .content {
  color: red;
  font-size: 15px;
  font-weight: bold;
}

.btn {
  padding: 5px;
}

.warning-message {
  background-color: red;
}

.footer {
  color: #fff;
}

.content {
  margin: 10px;
}

In this example, .base-css is a class with many inherited classes based on it. If you take a look at the example, you can see that the inherited classes are not related to each other. I have .btn for my buttons and .footer for my footer. If I have 100 classes inheriting from .base-css, the selectors which have .base-css characteristics will increase. This significantly and unnecessarily complicates our CSS end result. Moreover, this makes it more difficult to check the properties of each selector.

在此示例中， .base-css是一个类，其中有许多基于它的继承类。 如果看一下该示例，可以看到继承的类彼此不相关。 我已经.btn为我的按钮和.footer我的页脚。 如果我有100个继承自.base-css ，则具有.base-css特性的选择器将增加。 这大大不必要地使我们CSS最终结果复杂化。 而且，这使得检查每个选择器的属性更加困难。

After re-factoring my Sass, I realised that we should only use @extend when the inherited class directly relates to the object we are inheriting from. It should be a variation of the object or style, rather than a blanket rule for many unrelated elements. For inheritance like my example above, we should rely on CSS’ existing capabilities to cascade our styles into child elements.

在重构我的Sass之后，我意识到只有当继承的类与我们要继承的对象直接相关时，才应该使用@extend 。 它应该是对象或样式的变体，而不是许多不相关元素的总括规则。 对于像上面的示例那样的继承，我们应该依靠CSS的现有功能将样式层叠为子元素。

.btn {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}

.btn-success {
  @extend .btn;
  background-color: green;
}

.btn-warning {
  @extend .btn;
  background-color: orange;
}

.btn-info {
  @extend .btn;
  background-color: blue;
}

.btn-error {
  @extend .btn;
  background-color: red;
}

is compiled to:

编译为：

.btn, .btn-success, .btn-warning, .btn-info, .btn-error {
  color: #fff;
  font-size: 15px;
  font-weight: bold:
}
.btn-success {
  background-color: green;
}

.btn-warning {
  background-color: orange;
}

.btn-info {
  background-color: blue;
}

.btn-error {
  background-color: red;
}

We can see that the above example is much more correct and reasonable. We have reduced the scope by applying @extend only to classes that should inherit from one another due to being a variation of a type of object. For example, the above styles are all related to differing types of buttons.

我们可以看到上面的例子更加正确和合理。 我们通过仅将@extend应用于由于对象类型的一种变化而应该彼此继承的类，从而减小了范围。 例如，以上样式都与不同类型的按钮有关。

结论 (Conclusion)

Sass is a valuable extension that can improve our CSS to make it cleaner, well-structured, organized and easy to develop and maintain. If you have not tried Sass before, I highly recommend it. When you feel more comfortable with the basics of Sass, we recommend reading Hugo Giraudel’s SitePoint article on What Nobody Told You About Sass’s @extend. We also have an entire Sass reference guide at SitePoint’s Sass Reference with plenty of examples for you to explore.

Sass是有价值的扩展，可以改进CSS，使其更整洁，结构合理，组织合理并且易于开发和维护。 如果您以前没有尝试过Sass，我强烈建议您使用。 当您对Sass的基础知识感到更满意时，我们建议阅读Hugo Giraudel的SitePoint文章，内容是关于Sass的@extend没人告诉您的@extend 。 我们在SitePoint的Sass参考中也有完整的Sass参考指南， 其中包含大量示例供您探索。

Thank you to Steve and Ezekiel in the comments for picking up an error in the first version of this post, it has since been updated.

感谢Steve和Ezekiel在本文的第一版中发现错误的注释，该错误已被更新。

翻译自: https://www.sitepoint.com/the-benefits-of-inheritance-via-extend-in-sass/

sass extend