zoukankan      html  css  js  c++  java
  • sass基础—继承及占位符

    /*继承:@extend ,继承多个类时使用逗号隔开*/
    .alert{
    color: #f00;
    }
    .info{
    100px;
    }

    .text-danger{
    background-color: #f0f;
    @extend .alert,.info;
    }

    /*链式继承*/
    .one{
    color: #f0f0;
    }
    .two{
    @extend .one;
    background-size: 100% 100%;
    }
    .three{
    @extend .two;
    border-color: #f00;
    }

    /*继承交叉合并(实际应用中应该避免该种用法):

    .four a, .four .five .six, .five .four .six {
    font-size: 16px;
    }
    */
    .four a{
    font-size: 16px;
    }
    .five .six{
    @extend a;
    }

    /*media继承(注意要继承的类需要在media内部,且选择器不能与外部的重名,若是把.text提到外部则无法继承)*/
    @media screen and (max- 600px){
    .text{
    border:1px solid #f00;
    }
    .content{
    @extend .text;
    }
    }

    /*占位选择器(作用在于公共的部分使用继承即可,不调用则不生成多余的css。)*/

    %warning{
    border:10px solid #f0f;
    }

    .success_info{
    @extend %warning;
    color: #f00;
    }

    占位选择器的渲染结果:

    .success_info{

    border:1px solid #f0f;

    color:#f00;

    }

    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    单向循环列表(Java实现)
    单链表的实现(Java实现)
    二分查找法(Java实现)
    六大排序算法(Java实现)
    学习python第十天
    学习python第九天
    MapNode
    AtomicReference
    AtomicStampedReference
    尾递归(TailRecursion)
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/10395502.html
Copyright © 2011-2022 走看看