Sass代码重用----Sass继承

首先知道 CSS具有两大特性：继承性，层叠性

其中继承性是指：子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。

所以：在Sass中，使用 “@extend” 来继承一个样式块，从而实现代码的重用。

举例：

   　　　　  .spriteAll

　　　　{

 

   　　 bakckground:url(images/sprite.png) no-repeat;

 

　　　　}

 

　　　　.sprite-1

 

　　　　{

 

   　　 @extend .spriteAll;

 

   　　 background-position:0 -30px;

 

　　　　}

 

　　　 .sprite-2

 

　　　　{

 

    　　@extend .spriteAll;

 

   　　 background-position:0 -60px;

 

　　　　}

编译后的css代码就是：

　　　　.spriteAll, .sprite-1, .sprite-2

　　　　{

  　　  bakckground: url(images/sprite.png) no-repeat;

　　　　}

　　　　.sprite-1

　　　　{　　

  　　  background-position: 0 -30px;

　　　　}

　　　　.sprite-2

　　　　{

 　　   background-position: 0 -60px;

　　　　}

 从这个例子我们可以看出，继承“@extend”是非常好用的。通过@extend，我们可以直接在“.sprite-1”和“.sprite-2”中插入定义好的“.spriteAll”，这样每次只要你修改了“.spriteAll”中的样式，“.sprite-1”和“.sprite-2”中的样式都会同时修改。

但是，注意到：

HTML中没有任何一个元素使用".spriteAll",它的存在就只是用来给它的孩子继承，那么它的编译就是多余的，那么有什么解决办法呢？这就引出了下一篇随笔---用占位符%placeholder”来优化“继承@extend”的输出。