Sass/scss function to create maps?

[TeoAlmonte]

Hey, I had a question.

Is it possible to create a @for/@each or some type of function to create maps?. I wanted to automate a color grid in where I could put in once color and then it would shoot out all these values. Or am i unable to create a map with a function?

@function getColor($color, $value) {
  @return map-get(map-get($colors, $color), $value);
}

$blue: #0000ff;
$red: #ff0000;
$green: #00ff00;

$color-shade1x: 5%;
$color-shade2x: 10%;

$pass: red green blue;

// some function that creates the map below.

$colors: (
  red: (
    100: lighten($red, $color-shade2x),
    200: lighten($red, $color-shade1x),
    300: $red,
    400: darken($red, $color-shade1x),
    500: darken($red, $color-shade2x),
  ),
  green: (
    100: lighten($green, $color-shade2x),
    200: lighten($green, $color-shade1x),
    300: $red,
    400: darken($green, $color-shade1x),
    500: darken($green, $color-shade2x),
  ),
  blue: (
    100: lighten($blue, $color-shade2x),
    200: lighten($blue, $color-shade1x),
    300: $red,
    400: darken($blue, $color-shade1x),
    500: darken($blue, $color-shade2x),
  ),
) !default;

I want to be able to easily add a class like ".hotpink-600" and if i want it at a different value i could simply do ".hotpink-700" . but manually creating maps for everything is no fun haha.

I did manage to do something with @for/@each but without creating the map.

[KittyGiraudel]

Hello,

I’m not entirely sure what you are trying to achieve. Feel free to show me your existing code so I can see what you have right now.

If you are looking to actually creating a variable, you can do so in a function with the !global flag, but I don’t think that’s what you want. Am I correct assuming you want to iterate on your map and dynamically output CSS classes?

[TeoAlmonte]

http://codepen.io/anon/pen/ggbrbb?editors=1100

I have an example above but without the map, i think maybe it's better if I better grasp the fundamentals and understand the functions better.

<style>
  .swatch {
    width: 150px;
    height: 150px;
    display: block;
    color: white;
    position: relative;
    float:left;
    &::after {
      position: absolute;
      right: 15px;
      bottom: 5px;
    }
}

$blue: #0ebeff;
$red:  #E33F63;

$color-shade2x: 17.5%;
$color-shade3x: 26%;

$color-name: steel red ocean;
$color-hex: #666 #d00 #0065a3;

$color-val: 100 200 300 400 500;
$color-shade: lighten lighten lighten darken darken;

$change: 5% 10% 0% 10% 5%;

@for $color-selected from 1 through length($color-name) {
  @for $color-value from 1 through length($color-val) {
    .swatch-#{nth($color-name, $color-selected)}-#{nth($color-val, $color-value)} {
      background: lighten(nth($color-hex, $color-selected), nth($change, $color-value));
      &::after {
            content: '#{lighten(nth($color-hex, $color-selected), nth($change, $color-value))}';
       }
    }
  }
}
</style>

I guess in this example the main question I have, is there a way to process a lighten or darken inside a function for the background i just manually wrote lighten but can I get the lighten or darken from $color-shade instead? nth($color-shade, $color-value)(nth($color-hex, $color-selected), nth($change, $color-value)) did not work as the color was not processed with the correct value.

All I get in return is "background: lighten #666, 5%;" it ignores the the lighten

I think if i understand this a bit better I might be able to see if a Map is even the correct path for what I want to achieve for this color grid.

cheers

[KittyGiraudel]

Oh, what you want is call(..). See http://sass-lang.com/documentation/Sass/Script/Functions.html#call-instance_method. Tell me if it helps. :)