sass @extend(继承)指令详解

  • sass @extend(继承)指令详解已关闭评论
  • 6 次浏览
  • A+
所属分类:Web前端
摘要

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。

通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。

普通CSS的实现

接下来以警告框为例进行讲,解4种类型

类型 说明
info 信息!请注意这个信息。
success 成功!很好地完成了提交。
warning 警告!请不要提交。
danger 错误!请进行一些更改。

所有警告框的基本样式(风格、字体大小、内边距、边框等...) ,因为我们通常会定义一个通用alert样式,类似于这样的

.alert{     padding: 15px;     margin-bottom: 20px;     border: 1px solid transparent;     border-radius: 4px;     font-size: 12px; } 

然后定义不同警告框单独风格:

.alert-info{     color: #31708f;     background-color: #d9edf7;     border-color: #bce8f1; }  .alert-success{     color: #3c763d;     background-color: #dff0d8;     border-color: #d6e9c6; }  .alert-warning{     color: #8a6d3b;     background-color: #fcf8e3;     border-color: #faebcc; }  .alert-danger{     color: #a94442;     background-color: #f2dede;     border-color: #ebccd1; } 

然后这样使用:

<div class="alert alert-info">     信息!请注意这个信息。 </div>  <div class="alert alert-success">     成功!很好地完成了提交。 </div>  <div class="alert alert-warning">     警告!请不要提交。 </div>  <div class="alert alert-danger">     错误!请进行一些更改。 </div> 

最后的效果:

![image-20220803090251819](D:html一些资料营销视频营销软件相关CSS预处理器SASSSCSS从入门到高级进阶—完整视频课程【最新录制】第九讲 sass @extend(继承)指令详解imagesimage-20220803090251819.png)

使用继承@extend进行改进

基本样式我们没有变,主要是各个警告框单独的样式

.alert-info{     @extend .alert;     color: #31708f;     background-color: #d9edf7;     border-color: #bce8f1; }  .alert-success{     @extend .alert;     color: #3c763d;     background-color: #dff0d8;     border-color: #d6e9c6; }  .alert-warning{     @extend .alert;     color: #8a6d3b;     background-color: #fcf8e3;     border-color: #faebcc; }  .alert-danger{     @extend .alert;     color: #a94442;     background-color: #f2dede;     border-color: #ebccd1; } 

这样编译后:

.alert, .alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }  .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }  .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }  .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }  .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } 

使用时就不须要再写基本类了

<div class="alert-info">     信息!请注意这个信息。 </div>  <div class="alert-success">     成功!很好地完成了提交。 </div>  <div class="alert-warning">     警告!请不要提交。 </div>  <div class="alert-danger">     错误!请进行一些更改。 </div> 

使用多个@extend

.alert{     padding: 15px;     margin-bottom: 20px;     border: 1px solid transparent;     border-radius: 4px;     font-size: 12px; }  .important{     font-weight: bold;     font-size: 14px; }  .alert-danger{     @extend .alert;     @extend .important;     color: #a94442;     background-color: #f2dede;     border-color: #ebccd1; } 

@extend多层继承

上面的方式还可以写成

.alert{     padding: 15px;     margin-bottom: 20px;     border: 1px solid transparent;     border-radius: 4px;     font-size: 12px; }  .important{     @extend .alert;     font-weight: bold;     font-size: 14px; }  .alert-danger{     @extend .important;     color: #a94442;     background-color: #f2dede;     border-color: #ebccd1; } 

占位符

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

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

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

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

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

之前的代码进行改写:

%alert{     padding: 15px;     margin-bottom: 20px;     border: 1px solid transparent;     border-radius: 4px;     font-size: 12px; } .alert-info{     @extend %alert;     color: #31708f;     background-color: #d9edf7;     border-color: #bce8f1; }  .alert-success{     @extend %alert;     color: #3c763d;     background-color: #dff0d8;     border-color: #d6e9c6; }  .alert-warning{     @extend %alert;     color: #8a6d3b;     background-color: #fcf8e3;     border-color: #faebcc; }  .alert-danger{     @extend %alert;     color: #a94442;     background-color: #f2dede;     border-color: #ebccd1; } 

编译后:

.alert-info, .alert-success, .alert-warning, .alert-danger { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; }  .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }  .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }  .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }  .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } 

从结果可以看到,没用alert类的样式生成,因为它根本没有用,所以此种情况用“占位符选择器”更合适

sass@extend指令的基本使用就是这些,对你有用的话,记得点赞哦~