使用css预处理器sass轻松生成margin、padding四个方向多个值的css样式代码

2019独角兽企业重金招聘Python工程师标准>>>

直接在scss文件上复制这段scss代码：

$directions:("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions:("p":"padding", "m":"margin");
//获取padding margin间隔
@each $dim in $dimensions {
    //循环四个方向
    @each $dir in $directions {
        @for $i from 1 through 5 {
            $size: $i*5;
            .#{nth($dim,1)}-#{nth($dir,1)}-#{$size} {
                #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
            }
        }
    }
}

编译scss文件得到css文件，即可得到如下css代码：

.p-t-5 { padding-top: 5px; }

.p-t-10 { padding-top: 10px; }

.p-t-15 { padding-top: 15px; }

.p-t-20 { padding-top: 20px; }

.p-t-25 { padding-top: 25px; }

.p-b-5 { padding-bottom: 5px; }

.p-b-10 { padding-bottom: 10px; }

.p-b-15 { padding-bottom: 15px; }

.p-b-20 { padding-bottom: 20px; }

.p-b-25 { padding-bottom: 25px; }

.p-l-5 { padding-left: 5px; }

.p-l-10 { padding-left: 10px; }

.p-l-15 { padding-left: 15px; }

.p-l-20 { padding-left: 20px; }

.p-l-25 { padding-left: 25px; }

.p-r-5 { padding-right: 5px; }

.p-r-10 { padding-right: 10px; }

.p-r-15 { padding-right: 15px; }

.p-r-20 { padding-right: 20px; }

.p-r-25 { padding-right: 25px; }

.m-t-5 { margin-top: 5px; }

.m-t-10 { margin-top: 10px; }

.m-t-15 { margin-top: 15px; }

.m-t-20 { margin-top: 20px; }

.m-t-25 { margin-top: 25px; }

.m-b-5 { margin-bottom: 5px; }

.m-b-10 { margin-bottom: 10px; }

.m-b-15 { margin-bottom: 15px; }

.m-b-20 { margin-bottom: 20px; }

.m-b-25 { margin-bottom: 25px; }

.m-l-5 { margin-left: 5px; }

.m-l-10 { margin-left: 10px; }

.m-l-15 { margin-left: 15px; }

.m-l-20 { margin-left: 20px; }

.m-l-25 { margin-left: 25px; }

.m-r-5 { margin-right: 5px; }

.m-r-10 { margin-right: 10px; }

.m-r-15 { margin-right: 15px; }

.m-r-20 { margin-right: 20px; }

.m-r-25 { margin-right: 25px; }

转载于:https://my.oschina.net/u/3986435/blog/3027653