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;
    }
  • 相关阅读:
    面向对象基本原则
    策略模式
    简单工厂模式
    高内聚、低耦合
    UML在代码中的展现
    使用commons-csv简单读写CSV文件
    java反射机制
    SrpingDruid数据源加密数据库密码
    markdown学习经验
    Vue.js学习笔记
  • 原文地址:https://www.cnblogs.com/zhn0823/p/6155455.html
Copyright © 2011-2022 走看看