zoukankan      html  css  js  c++  java
  • 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”的输出。

  • 相关阅读:
    winform编程设定listview选中行
    更新客户信息
    在Flutter中使用Android、iOS的原生 View
    怎么卸载nodejs?
    JavaScript实现简单的图片瀑布流插件
    通过代码重用攻击绕过现代XSS防御
    炫酷的播放粒子效果,你也可以学会!使用Web动画API制作
    14行实现js原生语法前端模板引擎
    什么是ESLint?
    js中require和import的区别
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11634459.html
Copyright © 2011-2022 走看看