zoukankan      html  css  js  c++  java
  • 3、SASS

    1、嵌套规则

    sass是允许在当前css样式中嵌套另一套css样式,内层样式将外层的选择器作为父选择器;例如:

    #main p {
      color: #00ff00;
      width: 97%;
    
      .redbox {
        background-color: #ff0000;
        color: #000000;
      }
    }

    编译为:

    #main p {
      color: #00ff00;
      width: 97%; 
    }
    #main p .redbox {
      background-color: #ff0000;
      color: #000000; 
    }

    2、父选择器 &

    有时候需要直接使用嵌套外层的夫选择器。当给某个元素设置hover样式时,可以用 代表嵌套外层的父选择器。例如:

    a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
    }

    编译为:

    a {
      font-weight: bold;
      text-decoration: none; 
    }
    a:hover {
      text-decoration: underline; 
    }
    body.firefox a {
      font-weight: normal; 
    }

    & 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如:

    #main {
      color: black;
      &-sidebar { border: 1px solid; }
    }

    编译为:

    #main {
      color: black; 
    }
    #main-sidebar {
      border: 1px solid; 
    }

    3、属性嵌套

    有些css属性有着相同的前缀(命名空间)。比如font-family,font-size,font-weight 都已 font 作为属性的命名空间。为了避免重复输入,sass循序将属性嵌套在命名空间中,例如:

    .funky {
      font: {
        family: fantasy;
        size: 30em;
        weight: bold;
      }
    }

    编译为:

    .funky {
      font-family: fantasy;
      font-size: 30em;
      font-weight: bold; 
    }

    下一篇文章我们介绍 《 SASS - 注释 /* */ 与 // 》

  • 相关阅读:
    策略模式
    Properties类学习笔记
    System类学习笔记
    一个反射的妙用案例
    new 对象时的暗执行顺序
    常用数据库默认端口号
    java对日开发常用语(词汇)总结
    java开发中常用语(词汇)含义
    MyBatis 常用词汇含义
    java SE,EE,ME区别
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/11677287.html
Copyright © 2011-2022 走看看