scss 的 @each指令

实例代码

$numArray: 10, 20, 30, 40;
@each $propKey, $propVal in (m: margin, p: padding) {
    @each $directionKey, $directionVal in (t: top, r: right, b: bottom, l: left) {
        @each $num in $numArray {
            .#{$propKey}#{$directionKey}-#{$num} {
                #{$propVal}-#{$directionVal}: ($num) + px;
            }
        }
    }
}

经过编译后，可以看作是

.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
...
.ml40 {
        margin-left: 40px;
}
...
.pl40 {
    padding-left: 40px;
}