Convert SASS map to individual variables

Question

Edit: I've come up with a solution, see my answer below.

Is there a way to do this? It is becoming quite cumbersome typing map-get($myArray, myKey). I have an array with dozens of values in, it would be very helpful if I could export them.

So that this:

$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);
}

Becomes this:

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

Please note that the example I have given is purely arbitrary.

kohloth · Answer 1 · 2015-01-03T16:11:21.497

Update: Ok, I've come up with a crafty half-fix. (Although this will be obvious to any discerning SCSS journeyman...)

As long as the elements you are trying to get are from the same array, you can always take advantage of the javascript style scope inheritance, and write a function with a short name that will pluck the element with the specified key from your array.

In reference to the example I gave originally:

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

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

For a single array with dozens of elements that you have to access frequently, it has the desired effect, and actually gives a feeling of the more convenient PHP style array syntax. i.e. instead of $g['width'] you use g(width)

Note that this isn't actually an answer to the question. Your references to the desired values are shorter and easier to type (this may have been your end goal, but it is not what was asked for), but this does not make it compatible with libraries that are expecting specific variables. — cimmanon, Jan 05 '15 at 15:55

score -1 · Answer 2 · answered Jan 02 '15 at 16:48

-1

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

You can use @each. In the above @each loop, i'm cycling over each key/value pair in $map, assigning the key to $prop and the value to $val. If you want, you can make a mixin (for example):

@mixin create-props($array) {
  @each $prop, $val in $array {
      #{$prop} : $val;
  }
}
.myselector {
  @include create-props($map);
}

answered Jan 02 '15 at 16:48

Alex Khlebaev

482
3
9

1

You're assuming that every time the OP wants to use a value from the mapping, they want to use *all* of the values. – cimmanon Jan 02 '15 at 17:06
That would mean I could type less for specifically recreating the above example, but it doesn't really achieve splitting the array into individual variables that can be accessed more easily. But its an interesting technique for other applications. – kohloth Jan 02 '15 at 17:42
1

cimmanon right. you can't create veriables from array dynamicly.I just suggested workaround for this problem solving specific task. – Alex Khlebaev Jan 02 '15 at 18:35

Convert SASS map to individual variables

2 Answers2