1
$base-space: 1rem !default;

$space-map : (
    '1o9': $base-space,
    '1o8': $base-space/8,
    '1o4': $base-space/4,
    '1o2': $base-space/2,
) !default;

@mixin containers($new-space-map) {

    @each $name, $value in $new-space-map {

        .container--#{$name}{
            margin: $value 0;
        }
    }
}

@include containers($space-map);

これにより、4 つの CSS クラスが出力されます。

引数として渡す名前に基づいて、4 つのクラスすべてまたは 1 つのクラスのみを生成しようとしています。

私の出力は次のようにする必要があります:

.container--1o9 {
  margin: 1rem 0;
}

.container--1o8 {
  margin: 0.125rem 0;
}

.container--1o4 {
  margin: 0.25rem 0;
}

.container--1o2 {
  margin: 0.5rem 0;
}

または

.container--1o2 {
  margin: 0.5rem 0;
}

私が渡す引数に基づいています。

さらに説明するには; @include必要に応じて、以下の両方の方法で同じ SASS マップを使用しようとしています。

@include containers(<SASS map file>); //This I achieved

また

@include containers(<any key from SASS Map>); //This I cant

私はここで立ち往生しており、これが達成可能かどうかわかりません。どんな助けでも大歓迎です。

4

1 に答える 1