zoukankan      html  css  js  c++  java
  • Sass-@extend

    Sass 中的 @extend 是用来扩展选择器或占位符。比如:

    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .error.intrusion {
      background-image: url("/image/hacked.png");
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }

    被编译为:

    .error, .seriousError {
      border: 1px #f00;
      background-color: #fdd; }
    
    .error.intrusion, .seriousError.intrusion {
      background-image: url("/image/hacked.png"); }
    
    .seriousError {
      border-width: 3px; }

    扩展选择器:

    @extend 不止扩展类选择器,还可以扩展任何选择器,比如 .special.cool, a:hover, 或 a.user[href^=“http://“],例如:

    .hoverlink {
      @extend a:hover;
    }
    a:hover {
      text-decoration: underline;
    }

    编译出来:

    a:hover, .hoverlink {
      text-decoration: underline; }

    再来看一个复杂点的:

    .hoverlink {
      @extend a:hover;
    }
    .comment a.user:hover {
      font-weight: bold;
    }

    编译出来的CSS

    .comment a.user:hover, .comment .user.hoverlink {
      font-weight: bold; }

    多个扩展

    所设某个样式要继承多个地方的样式,那么可以使用 @extend 来继承多个选择器或占位符的样式,如:
    .error {
      border: 1px #f00;
      background-color: #fdd;
    }
    .attention {
      font-size: 3em;
      background-color: #ff0;
    }
    .seriousError {
      @extend .error;
      @extend .attention;
      border-width: 3px;
    }

    编译出来的CSS

    .error, .seriousError {
      border: 1px #f00;
      background-color: #fdd; }
    
    .attention, .seriousError {
      font-size: 3em;
      background-color: #ff0; }
    
    .seriousError {
      border-width: 3px; }

    扩展单一选择器

    前面我们知道 %placeholder 不使用@extend显示调用是不会生成任何样式代码。那么在选择器中使用占位符一样。比如下面的代码:

    #context a%extreme {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }

    这段代码在不调用之前不产生任何代码,只有能过@extend调用之后才生成代码:

    .notice {
      @extend %extreme;
    }

    编译出来的CSS

    #context a.notice {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }
  • 相关阅读:
    负载均衡
    nginx 负载均衡
    linux crontab 定时任务
    linux各种查看端口号
    MYSQL集群
    linux ntp时间同步
    【推荐】开源项目ElasticAmbari助力 ElasticSearch、Kibana、ambari服务高效运维管理
    Flutter开发指南之理论篇:Dart语法05(单线程模型,事件循环模型,Isolate)
    对于 评论 发送,出现网络延迟、响应慢,用户多次点击发送按钮,怎么解决只生成一次数据存入DB
    第三方授权登录
  • 原文地址:https://www.cnblogs.com/qjuly/p/9128657.html
Copyright © 2011-2022 走看看