$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
私はここで立ち往生しており、これが達成可能かどうかわかりません。どんな助けでも大歓迎です。