-
情景:如果你的样式里有很多都是重复的代码,那么你可以这样做,引入sass,然后定义一个mixin.scss文件,其中你可以定义一些方法,将宽高作为参数传入这个函数
- 事例使用
//在style文件夹下定义一个mixin.scss文件
//定义宽高
@mixin wh($width, $height) {
width: $width;
height: $height;
}
//定义margin的值
@mixin mg($top, $right, $bottom, $left) {
margin-top: $top!important;
margin-left: $left;
margin-bottom: $bottom;
margin-right: $right;
}
- 如何使用
<style lang='scss'>
@import '../../style/mixin.scss';
#work{
.head-index {
@include wh(100%, 100px);
background-color: #fff;
box-shadow: 0 1px 0 0 #ddd;
.head-index-logo span{
text-align: left;
font-size: 40px;
}
}
.work-nav {
@include wh(100%, 300px);
background-color: #ddd;
margin-top: 0!important;
.nav-left {
@include mg(0, 0, 0, 20px);
}
}
}
</style>
- 总结
可能你会说,这样也有重复的代码呀,这只是sass使用的方法之一,相比来说确实是节省了一部分代码量,期望会有更好的方法,如何配置请看上一篇博客,如果有问题欢迎留言