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 个类或仅一个类。

我的输出需要是：

.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

0

删除！默认值。这将按您的预期工作

链接到萨斯迈斯特

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

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

于 2018-04-26T16:28:31.480 回答