SASS – @extend(继承)指令

@extend指令可以让一个CSS类继承另一个CSS类。

当多个元素之间共享一组属性值,同时又有各自额外属性值时,这种方法很有用。

举例说明

以警告框为例,警告框有4种类型:

  • info
  • success
  • error
  • warning

所有类型的警告框样式相同,但颜色不同。每个类型的警告框使用@extend指令继承一组公共属性,然后各自设置颜色值。

示例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend .alert;
  background-color: dodgerblue;
}

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

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

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

经过编译会输出以下css内容:

.alert, .info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }

多个@extend

可以在选择器中使用多个@extend指令。

示例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  font-weight: bold;
  font-size: larger;
}

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

经过编译会输出以下css内容:

.alert, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

.important, .important-error {
  font-weight: bold;
  font-size: larger; }

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

连锁 @extend

选择器可以连锁继承。

示例:

.alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.important {
  @extend .alert;
  font-weight: bold;
  font-size: larger;
}

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

经过编译会输出以下css内容:

.alert, .important, .important-error {
  padding: 10px;
  background-color: silver;
  color: white; }

.important, .important-error {
  font-weight: bold;
  font-size: larger; }

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

占位符选择器

你可能发现被继承的css父类并没有被实际应用,也就是说html代码中没有使用该类,它的唯一目的就是扩展其他选择器。

对于该类,可能不希望被编译输出到最终的css文件中,它只会增加CSS文件的大小,永远不会被使用。

这就是占位符选择器的作用。

占位符选择器类似于类选择器,但是,它们不是以句点(.)开头,而是以百分号(%)开头。

当在Sass文件中使用占位符选择器时,它可以用于扩展其他选择器,但不会被编译成最终的CSS。

占位符选择器用法示例:

%alert {
  padding: 10px;
  background-color: silver;
  color: white;
}

.info {
  @extend %alert;
  background-color: dodgerblue;
}

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

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

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

经过编译会输出以下css内容:

.info, .success, .error, .warning {
  padding: 10px;
  background-color: silver;
  color: white; }

.info {
  background-color: dodgerblue; }

.success {
  background-color: green; }

.error {
  background-color: red; }

.warning {
  background-color: orange; }

注意,编译后的CSS中不包含%alert选择器。



浙ICP备17015664号 浙公网安备 33011002012336号 联系我们 网站地图  
@2019 qikegu.com 版权所有,禁止转载