SASS 中的 @extend 继承使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS 的样式表往往难以维护和重用。为了解决这个问题，SASS 提供了 @extend 继承选择器的功能，可以大大简化代码，并使用少量的 CSS 样式表达式创建灵活的样式。

@extend 的基本语法

SASS 的 @extend 继承选择器语法基于 SassScript 的函数调用语法。当需要从已有的 CSS 类继承某个或某些属性时，可以使用 @extend 选择器。例如：

// javascriptcn.com 代码示例
.content {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.page {
    @extend .content;
    margin: 0 auto;
    width: 960px;
}

上面的示例中，.page 类从 .content 类继承了其属性，最终生成的 CSS 如下：

// javascriptcn.com 代码示例
.content, .page {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.page {
    margin: 0 auto;
    width: 960px;
}

继承使用的注意事项

选择器优先级

在使用 @extend 时，要注意选择器的优先级。@extend 的选择器不仅会继承其父级的属性，还会继承其选择器的优先级。如果父级选择器的优先级高于子级选择器的优先级，则 @extend 不会起作用。

例如：

// javascriptcn.com 代码示例
.content {
    background-color: #fff;
    padding: 10px;
}

.page {
    @extend .content;
    background-color: #ccc;
}

.content {
    color: #000;
}

最终生成的 CSS 是这样的：

// javascriptcn.com 代码示例
.content, .page {
    background-color: #fff;
    padding: 10px;
}

.page {
    background-color: #ccc;
    color: #000;
}

只继承部分属性

有时候，只需要继承选择器中的部分属性，而不是全部属性。可以使用关键字 % 定义一个占位符选择器，并将其与实际的选择器 @extend。

例如：

// javascriptcn.com 代码示例
%content {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.page {
    @extend %content;
    margin: 0 auto;
    width: 960px;
}

.sidebar {
    @extend %content;
    margin-left: 20px;
}

最终生成的 CSS 如下：

// javascriptcn.com 代码示例
.page, .sidebar {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

.page {
    margin: 0 auto;
    width: 960px;
}

.sidebar {
    margin-left: 20px;
}

避免重复定义

使用 @extend 时，要避免重复定义选择器，否则可能会产生意想不到的后果。

例如：

// javascriptcn.com 代码示例
.content {
    background-color: #fff;
    padding: 10px;
}

.page {
    @extend .content;
    background-color: #ccc;
}

.content {
    color: #000;
}

.page {
    @extend .content;
}

上面的代码中，.content 和 .page 均继承了 .content 的样式属性，实际上相当于将 .page 重复继承了一次，最终生成的 CSS 如下：

// javascriptcn.com 代码示例
.content, .page {
    background-color: #fff;
    padding: 10px;
    color: #000;
}

.page {
    background-color: #ccc;
}

支持动态选择器

使用 @extend 时，可以使用动态选择器。

例如：

// javascriptcn.com 代码示例
%button {
  padding: 5px 10px;
  background-image: linear-gradient(#444, #000);
}

.btn-primary {
  @extend %button;
  color: white;
  &:hover {
    background-color: #1e87f0;
    background-image: none;
  }
}

.btn-danger {
  @extend %button;
  color: white;
  &:hover {
    background-color: #dd4b39;
    background-image: none;
  }
}

总结

使用 @extend 继承选择器可以大大简化代码，使用少量的 CSS 样式表达式创建灵活的样式。但是在使用的时候需要注意选择器优先级、只继承部分属性、避免重复定义以及支持动态选择器等方面，才能发挥 @extend 继承的最大优势。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65499d597d4982a6eb3d3331