SCSS中的循环 - 多个变量和不同的值

Question

我想使用多个变量和不同的值进行循环。我写了.scss代码：

// Margin variabels
$margin-dynamic: 15px !default;
$margin-auto: 0 auto !default;
$margin-none: 0 !default;

// Dynamic margin @mixin
@mixin margin-classes($margin-dynamic-classes) {
    @each $margins in $margin-dynamic-classes {
        .margin-#{$margins} {
            margin-#{$margins}: $margin-dynamic !important;
        }
        .margin-duble-#{$margins} {
            margin-#{$margins}: ($margin-dynamic * 2) !important;
        }
        .margin-minus-#{$margins} {
            margin-#{$margins}: -#{$margin-dynamic} !important;
        }
    }
}

@include margin-classes($margin-dynamic-classes:top right bottom left);

// Static margin
.margin-auto {
    margin: $margin-auto;
}

.margin-none {
    margin: $margin-none;
}

我想在循环中添加.margin-auto和.margin-none，但我不知道该怎么做。

我遇到的变量存在同样的问题：

// Display variabels
$display-block: block !default;
$display-inline-block: inline-#{$display-block} !default;
$display-inline: inline !default;
$display-table: table !default;
$display-table-cell: #{$display-table}-cell !default;
$display-none: none !default;

// Display
.display-block {
    display: $display-block;
}
.display-inline-block {
    display: $display-inline-block;
}
.display-inline {
    display: $display-inline;
}
.display-table {
    display: $display-table;
}
.display-table-cell {
    display: $display-table;
}
.display-none {
    display: $display-none;
}

我是SASS的新人，所以我希望对此有所澄清。