sass嵌套

   sass

一、sass镶嵌规则

//HTML：

 <div>
    <h3></h3>
    <p></p>
    <a href=""></a>
</div>

sass嵌套书写方式：

div {
        width: $width;
        h3  {
            color: $color;
        }
        p {
            text-indent: 2em;
        }
        a {
            color: #000;
            &:hover {
                color: #c00;
            }
        }
    }

二、群组选择器嵌套:

//HTML：(h3,p,高属性值相同）                                                   

<div>
    <h3></h3>
    <p></p>
    <a href=""></a>
</div>

sass嵌套书写方式：

 div{
  h3,p,a{
    height：80px
   }
}

三、混合器@mixin

   <div></div>

      例：@mixin a{
                 height:80px;
                 width:80px;
                 background:#ffffff;
               }
          div{
              include:@mixin a
             }