sass me（sass @extend（继承）指令详解）

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

通常会在 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>

最后的效果：


使用继承@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指令的基本使用就是这些 

     

     

     

 ，对你有用的话

  




  




  




  ，记得点赞哦~