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;
    }
  • 相关阅读:
    java打包与热部署 爱上
    分组后最新的记录 爱上
    Js操作Excel常用方法 GO
    查找父元素和子元素 GO
    DataView不能按中文排序问题解决 GO
    浮动层居中的对话框效果演示 GO
    ajax form提交 GO
    SQL Server智能提示插件下载
    提高代码质量的三要素
    Div的宽度与高度设定100%
  • 原文地址:https://www.cnblogs.com/zhn0823/p/6155455.html
Copyright © 2011-2022 走看看