Variables 将SASS映射转换为单个变量

编辑：我想出了一个解决方案，请看下面我的答案

有办法做到这一点吗？键入map get（$myArray，myKey）变得相当麻烦。我有一个数组，里面有几十个值，如果我可以导出它们，那将非常有用

因此：

$map: (
    width: 100px,
    height: 200px,
    color: red,
    background: blue
);

.myselector {
    width: map-get($map, width);
    height: map-get($map, height);
    color: map-get($map, color);
    background: map-get($map, background);
}

变成这样：

$map: (
    width: 100px,
    height: 200px,
    color: red,
    background: blue
);

 /* some function to convert the map to vars */

.myselector {
    width: $width;
    height: $height;
    color: $color;
    background:$background;
}

请注意，我给出的例子完全是武断的

$map: (
    width: 100px,
    height: 200px,
    color: red,
    background: blue
);
.myselector {
  @each $prop, $val in $map {
      #{$prop} : $val;
  }
}

你可以使用@each。在上面的@each循环中，我循环遍历$map中的每个键/值对，将键分配给$prop，将值分配给$val。 如果需要，可以制作混音（例如）：

你可以使用@each。在上面的@each循环中，我循环遍历$map中的每个键/值对，将键分配给$prop，将值分配给$val。 如果需要，可以制作混音（例如）：

---

更新：好的，我想出了一个巧妙的半修复。（尽管这对任何有眼光的SCSS熟练工来说都是显而易见的…）

只要尝试获取的元素来自同一数组，就可以始终利用javascript样式的作用域继承，并编写一个具有短名称的函数，该函数将从数组中提取具有指定键的元素

关于我最初给出的示例：

@function g($key) {
    @return array-get($map, $key);
}

.myselector {
    width: g(width);
    height: g(height);
    color: g(color);
    background: g(background);
}

---

对于一个包含数十个必须频繁访问的元素的数组，它具有所需的效果，并且实际上提供了一种更方便的PHP风格数组语法的感觉。i、 你用g（宽度）代替$g['width']，更新：好的，我想出了一个巧妙的半修复方法。（尽管这对任何有眼光的SCSS熟练工来说都是显而易见的…）

只要尝试获取的元素来自同一数组，就可以始终利用javascript样式的作用域继承，并编写一个具有短名称的函数，该函数将从数组中提取具有指定键的元素

关于我最初给出的示例：

@function g($key) {
    @return array-get($map, $key);
}

.myselector {
    width: g(width);
    height: g(height);
    color: g(color);
    background: g(background);
}

---

对于一个包含数十个必须频繁访问的元素的数组，它具有所需的效果，并且实际上提供了一种更方便的PHP风格数组语法的感觉。i、 e.您使用g（width）

而不是$g['width']，您假设每次OP想要使用映射中的一个值时，他们都想要使用所有的值。这意味着我可以少键入一些，专门重新创建上面的示例，但它并没有真正实现将数组拆分为更容易访问的单个变量。但对于其他应用来说，这是一种有趣的技术。您无法从数组动态创建veriables。我只是建议解决此问题的特定任务的变通方法。您假设每次OP想要使用映射中的值时，他们都想要使用所有值。这意味着我可以少键入一些，专门重新创建上面的示例，但它并没有真正实现将数组拆分为更容易访问的单个变量。但对于其他应用来说，这是一种有趣的技术。您无法动态地从数组创建veriables。我只是建议解决此问题的特定任务的变通方法。请注意，这实际上并不是问题的答案。您对所需值的引用较短且易于键入（这可能是您的最终目标，但不是要求的），但这并不使其与需要特定变量的库兼容。请注意，这实际上不是问题的答案。您对所需值的引用更短，更容易键入（这可能是您的最终目标，但不是要求的），但这并不使其与需要特定变量的库兼容。