scss编译缺失

Question

问题描述

编译缺失了一部分wrap的部分

问题出现的环境背景及自己尝试过哪些方法

环境：gulp、scss

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

$dir: (
    row: "row", 
    col: "column", 
    rerow: "row-reverse", 
    recol: "column-reverse"
);

$wrap: (
    wrap: "wrap",
    nowrap: "nowrap",
    rewrap: "wrap-reverse"
);

$flexAttr: (
    dir: (
        attr: "direction",
        val: $dir
    ),
    wrap: (
        attr: "wrap",
        val: $wrap
    )
);

.l-flex {
    display: flex;
    @each $attr in map-keys($flexAttr) {
        $item: map-get($flexAttr, $attr);
        $property: map-get($item, "attr");
        $val: map-get($item, "val");
        &-#{$attr} {
            @each $key in map-keys($val) {
                &--#{$key} {
                    flex-#{$property}: map-get($dir, $key);
                }
            }
        }
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

.l-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.l-flex-dir--row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: "row";
  -ms-flex-direction: "row";
  flex-direction: "row";
}

.l-flex-dir--col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: "column";
  -ms-flex-direction: "column";
  flex-direction: "column";
}

.l-flex-dir--rerow {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: "row-reverse";
  -ms-flex-direction: "row-reverse";
  flex-direction: "row-reverse";
}

.l-flex-dir--recol {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: "column-reverse";
  -ms-flex-direction: "column-reverse";
  flex-direction: "column-reverse";
}
/* 缺失了.l-flex-wrap的部分... */

Answer 1

flex-#{$property}: map-get($dir, $key);改为flex-#{$property}: map-get($val, $key);