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

时间:2019-10-08
本文章向大家介绍Sass代码重用----Sass继承,主要包括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;
    }

原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11634459.html