1. 遍历@each，完成padding类、font-size计算类.

@each in遍历、$变量、定义数组的圆括号()
通过 #{} 插值语句，使用变量(简单说，就是将变量插到类名、属性值等里面)

@each $var in (14, 15, 16, 20) {
    .fs-#{$var} {
        font-size: #{$var * 0.02}rem;
    }
}

// Margin、Padding
$base-size: 1px;
$space-types:('m':margin,'p':padding);
$space-direction:('t':top,'l':left,'b':bottom,'r':right);
$space-size:(
    5:5,
    10:10,
    15:15,
    18:18,
    20:20,
);
@each $typeKey,$typeValue in $space-types {
    @each $sizeKey,$sizeValue in $space-size{
        // .m-1
        .#{$typeKey}-#{$sizeKey}{
            #{$typeValue}:$sizeValue * $base-size;
        }
        // .mx-1 .my-1 左右 上下
        .#{$typeKey}x-#{$sizeKey}{
            #{$typeValue}-right:$sizeValue * $base-size;
            #{$typeValue}-left:$sizeValue * $base-size;
        }
        .#{$typeKey}y-#{$sizeKey}{
            #{$typeValue}-top:$sizeValue * $base-size;
            #{$typeValue}-bottom:$sizeValue * $base-size;
        }
        @each $key,$value in $space-direction{
            // .mt-1
            .#{$typeKey}#{$key}-#{$sizeKey}{
                #{$typeValue}-#{$value}:$sizeValue * $base-size;
            }
        }     
    }
}

#附录——sass公共样式

/**
* @file 封装公共样式类
*/

// color background-color
@each $key, $value in $colors {
    .text-#{$key} {
        color: $value;
    }
    .bg-#{$key} {
        background-color: $value;
    }
}

// text-align
@each $key in (left, center, right) {
    .text-#{$key} {
        text-align: $key;
    }
}

// font-weight
@each $key in (600, 800) {
    .fw-#{$key} {
        font-weight: $key;
    }
}

// margin padding
$base-size: 1px;
$space-types: (
    "m": margin,
    "p": padding
);
$space-direction: (
    "t": top,
    "l": left,
    "b": bottom,
    "r": right
);
$space-size: (
    5: 5,
    10: 10,
    15: 15,
    18: 18,
    20: 20
);
@each $typeKey, $typeValue in $space-types {
    @each $sizeKey, $sizeValue in $space-size {
        // .m-1
        .#{$typeKey}-#{$sizeKey} {
            #{$typeValue}: $sizeValue * $base-size;
        }
        // .mx-1 .my-1 左右 上下
        .#{$typeKey}x-#{$sizeKey} {
            #{$typeValue}-right: $sizeValue * $base-size;
            #{$typeValue}-left: $sizeValue * $base-size;
        }
        .#{$typeKey}y-#{$sizeKey} {
            #{$typeValue}-top: $sizeValue * $base-size;
            #{$typeValue}-bottom: $sizeValue * $base-size;
        }
        @each $key, $value in $space-direction {
            // .mt-1
            .#{$typeKey}#{$key}-#{$sizeKey} {
                #{$typeValue}-#{$value}: $sizeValue * $base-size;
            }
        }
    }
}

// flex
// justify-content
$justify-content: (
    "flex-start": flex-start,
    "flex-end": flex-end,
    "center": center,
    "space-between": space-between,
    "space-around": space-around
);
@each $key, $value in $justify-content {
    .jc-#{$key} {
        justify-content: $value;
    }
}