sass引用代码块

在页面中元素用到相同的scss代码,我们可以写成块的形式,在用到的元素上进行引入

1.定义

@mixin com{
    height: 1px;
    margin:0 auto;
    position: absolute;
    top: 0;

} 

2.引入

#box{
            width:800px;
            position: relative;
            margin-top: 100px;
            #line1{
                width: 100%;
                background: #444;
                @include com;
            }
            #line2{
                width: 80%;
                background: #666;
                left: 10%;
                 @include com;
            }
            #line3{
                width: 60%;
                background: #888;
                left: 20%;
                @include com;
            }        
        }

3.编译之后的结果

#box {
width: 800px;
position: relative;
margin-top: 100px;
}


#box #line1 {
width: 100%;
background: #444;
height: 1px;
margin: 0 auto;
position: absolute;
top: 0;
}


#box #line2 {
width: 80%;
background: #666;
left: 10%;
height: 1px;
margin: 0 auto;
position: absolute;
top: 0;
}


#box #line3 {
width: 60%;
background: #888;
left: 20%;
height: 1px;
margin: 0 auto;
position: absolute;
top: 0;
}