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}

转载于:https://www.cnblogs.com/gyw1996/p/10110953.html