SASS 继承的实现原理及使用技巧

一、SASS 继承的实现原理

SASS 的继承是基于 CSS 的选择器继承实现的。在 SASS 中，使用 @extend 进行继承，可以将一个选择器的样式继承到另一个选择器上，从而实现样式的复用。

继承的实现原理是通过生成一个新的选择器来实现的，这个新的选择器包含了继承的样式和被继承的选择器的样式，同时也继承了被继承的选择器的特性，比如伪类和伪元素。

例如：

// javascriptcn.com 代码示例
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn-primary {
  @extend .btn;
  background-color: #007bff;
  color: #fff;
}

在上面的代码中，.btn-primary 继承了 .btn 的样式，并且添加了自己的样式。在编译后的 CSS 中，.btn-primary 的样式就包含了 .btn 和 .btn-primary 的样式。

// javascriptcn.com 代码示例
.btn, .btn-primary {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

二、SASS 继承的使用技巧

1. 继承公共样式

在编写 CSS 样式时，经常会出现多个选择器具有相同的样式，这时可以使用继承来实现样式的复用。

例如：

// javascriptcn.com 代码示例
.error {
  color: red;
  font-size: 14px;
}

.warning {
  color: orange;
  font-size: 14px;
}

.success {
  color: green;
  font-size: 14px;
}

上面的代码中，.error、.warning 和 .success 三个选择器都具有相同的 font-size 样式，可以使用继承来避免重复的样式。

// javascriptcn.com 代码示例
.message {
  font-size: 14px;

  &.error {
    @extend .message;
    color: red;
  }

  &.warning {
    @extend .message;
    color: orange;
  }

  &.success {
    @extend .message;
    color: green;
  }
}

在上面的代码中，.message 选择器包含了 font-size 样式，.error、.warning 和 .success 选择器继承了 .message 的样式，并添加了自己的颜色样式。

2. 继承伪类和伪元素

在 SASS 中，继承也可以继承伪类和伪元素。

例如：

// javascriptcn.com 代码示例
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;

  &:hover {
    background-color: #eee;
  }

  &::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: #ccc;
  }
}

.btn-primary {
  @extend .btn;
  background-color: #007bff;
  color: #fff;

  &:hover {
    background-color: #0056b3;
  }
}

在上面的代码中，.btn 选择器包含了 :hover 和 ::before 伪类和伪元素的样式，.btn-primary 继承了 .btn 的样式，并添加了自己的样式。

3. 继承多个选择器

在 SASS 中，一个选择器可以继承多个选择器的样式，只需要在 @extend 中使用逗号分隔多个选择器即可。

例如：

// javascriptcn.com 代码示例
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.btn-primary {
  @extend .btn, .btn-large;
  background-color: #007bff;
  color: #fff;
}

.btn-large {
  font-size: 18px;
}

在上面的代码中，.btn-primary 继承了 .btn 和 .btn-large 两个选择器的样式，并添加了自己的样式。

三、总结

SASS 的继承是基于 CSS 的选择器继承实现的，可以将一个选择器的样式继承到另一个选择器上，从而实现样式的复用。在使用继承时，需要注意继承的选择器和被继承的选择器之间的关系，以及继承公共样式、继承伪类和伪元素、继承多个选择器等技巧。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6506729195b1f8cacd252a5c