使用css預處理器sass輕鬆生成margin、padding四個方向多個值的css樣式代碼

直接在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; }