zoukankan      html  css  js  c++  java
  • [Sass]扩展/继承

    [Sass]扩展/继承

    继承对于了解 CSS 的同学来说一点都不陌生,先来看一张图:

    图中代码显示“.col-sub .block li,.col-extra .block li” 继承了 “.item-list ul li”选择器的 “padding : 0;” 和 “ul li” 选择器中的 “list-style : none outside none;”以及 * 选择器中的 “box-sizing:inherit;”。

    在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块,从而实现代码的继承。如下所示:

    //SCSS
    .btn {
      border: 1px solid #ccc;
      padding: 6px 10px;
      font-size: 14px;
    }
    
    .btn-primary {
      background-color: #f36;
      color: #fff;
      @extend .btn;
    }
    
    .btn-second {
      background-color: orange;
      color: #fff;
      @extend .btn;
    }

    编译出来之后:

    //CSS
    .btn, .btn-primary, .btn-second {
      border: 1px solid #ccc;
      padding: 6px 10px;
      font-size: 14px;
    }
    
    .btn-primary {
      background-color: #f36;
      color: #fff;
    }
    
    .btn-second {
      background-clor: orange;
      color: #fff;
    }

    从示例代码可以看出,在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器:

    .btn, .btn-primary, .btn-second {
      border: 1px solid #ccc;
      padding: 6px 10px;
      font-size: 14px;
    }
  • 相关阅读:
    密码系统的安全性
    liboqs-量子安全密码算法开源C库
    密码基础知识(1)
    同态加密
    NTL 库函数
    以太坊相关的区块链知识
    53字符流中第一个不重复的字符
    基础小知识总结
    52表示数值的字符串 记忆
    HIHOcoder编程总结
  • 原文地址:https://www.cnblogs.com/zhn0823/p/6155455.html
Copyright © 2011-2022 走看看