在开发中 ,经常会用到一些样式,每次都写一遍非常的麻烦 ,写在公共scss里面 调用
@each $value in 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100 {
.pt-#{$value} {
padding-top: $value + px;
}
.pb-#{$value} {
padding-bottom: $value + px;
}
.pl-#{$value} {
padding-left: $value + px;
}
.pr-#{$value} {
padding-right: $value + px;
}
.p-#{$value} {
padding: $value + px;
}
.mt-#{$value} {
margin-top: $value + px;
}
.mb-#{$value} {
margin-bottom: $value + px;
}
.ml-#{$value} {
margin-left: $value + px;
}
.mr-#{$value} {
margin-right: $value + px;
}
.m-#{$value} {
margin: $value + px;
}
}
.mr-0{
margin-right: 0 !important;
}
直接调用就可以了, 其他的样式也是一样的