006.继承

1. 使用继承

.error {
  border: 1px red;
  background-color: #fdd;
}
.serious-error {
  @extend .error;
  border-width: 3px;
}

编译后

.error {
  border: 1px red;
  background-color: #fdd;
}
.serious-error {
  border: 1px red;
  background-color: #fdd;
  border-width: 3px;
}

2. 相关继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译后

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

3. 扩展混合选择器

a:hover {
  text-decoration: underline;
}
.hoverlink {
  @extend a:hover;
}

编译后

a:hover, .hoverlink {
  text-decoration: underline; }

4. 多重继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译后

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

5. 链式继承

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

编译后

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

6. 选择器序列继承

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

#fake-links .link {
  @extend a;
}

编译后

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

7. 合并选择器序列

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

编译后

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

8. 继承专用选择器%

使用%的选择器不会被输出到css中，是专门用于被其他选择器继承的。

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}

编译后

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

9. ! optional 标志

在选择器后添加! optional标志可使得一个<kbd>@extend</kbd>不产生任何新的选择器。

a.important {
  @extend .notice !optional;
}

如果不存在.noteice选择器，加上! optional后不会出错，否则会产生错误。

10. @extend 指令注意事项

在指令（例如@media）中使用<kbd>@extend</kbd>有一些限制。 Sass不能在@media块之外的CSS规则应用于其中的选择器，而不通过复制样式在所有地方创建大量的样式表膨胀。这意味着如果在@media（或其他CSS指令）中使用<kbd>@extend</kbd>，则只能扩展出现在同一个指令块中的选择器。

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

编译后将产生错误

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

继承