1.将下面函数添加进全局样式文件
/*
例:mt-10=> margin-right:10px;
*/
@each $type, $type-name in (margin, m), (padding, p) {
@each $position, $position-name in ("-top", t), ("-bottom", b), ("-left", l), ("-right", r), ("", "") {
@for $i from 0 through 30 {
.#{$type-name}#{$position-name}-#{$i} {
#{$type}#{$position}: #{$i}px;
}
}
}
}
2.使用时
实例:
<div class="mr-10"></div>
相当于实现了下面代码的效果:
.mr-10 {
margin-right: 10px;
}
3.自己使用时数字可以自定义
可以通过 修改 0 through 30 来修改使用的范围值