- 嵌套
body{
div{
border:1px solid red
}
}
等价于
body div{
border 1px solid red
}
- 声明变量
$black:black;
body{
div{
border:1px solid $black
}
}
可以通过只改变$black的样式来改变引用该样式选择器的样式
- @mixin
@mixin box{
border:1px solid red;
background-color:#ddd
}
body{
div{
@include box
}
}
body{
footer{
@include box
}
}
优点：减少代码量
缺点：实际（浏览器加载）代码量并未改变，@include相当于直接将代码copy下来
4.placeholder
%box{
border:1px solid red;
background-color:#ddd
}
body{
div{
@extend box
}
}
body{
footer{
@extend box
}
}
真实减少代码量
通过并行选择器来进行样式的复用
网友评论