Sass-@extend

Posted keep

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass-@extend相关的知识,希望对你有一定的参考价值。

Sass 中的 @extend 是用来扩展选择器或占位符。比如:

.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; }

扩展选择器:

@extend 不止扩展类选择器,还可以扩展任何选择器,比如 .special.cool, a:hover, 或 a.user[href^=“http://“],例如:

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

编译出来:

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

再来看一个复杂点的:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

编译出来的CSS

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

多个扩展

所设某个样式要继承多个地方的样式,那么可以使用 @extend 来继承多个选择器或占位符的样式,如:
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译出来的CSS

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

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

.seriousError {
  border-width: 3px; }

扩展单一选择器

前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码:

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

这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码:

.notice {
  @extend %extreme;
}

编译出来的CSS

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

 

以上是关于Sass-@extend的主要内容,如果未能解决你的问题,请参考以下文章

scss SASS EXTEND:重置对象

Materializecss & vue3:如何使用 sass @extend 为文本着色?

SASS - 使用Sass程序

SASS - 简介

SASS - 函数

SASS教程