将 SASS Mixin 中的多个参数传递到输出集 classes 或单个 class

Question

$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 classes.

我正在尝试根据我作为参数传递的名称生成所有 4 个 class 或仅生成一个 class。

我的输出需要是：

.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;
}

基于我传递的论点。

进一步解释；我正在尝试根据我的需要以下面提到的两种方式在同一个 SASS 地图上使用 @include：

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

或

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

我被困在这里，不确定这是否可以实现。非常感谢任何帮助。

Answer 1

删除 !Default。这将按您的预期工作

Link 到 sassmeister

https://www.sassmeister.com/gist/2839eaf64bd441e73a92aed6bb980465

记住所有 4 个类都被编译到您的 CSS 文件中。只用你想要的那个

将 SASS Mixin 中的多个参数传递到输出集 classes 或单个 class

Passing multiple arguments in SASS Mixin to output set of classes or single class

sass

extend

mixins

sass-maps

scss-mixins