Sass/scss function to create maps?
Closed this issue · 3 comments
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.
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?
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
Oh, what you want is call(..)
. See http://sass-lang.com/documentation/Sass/Script/Functions.html#call-instance_method. Tell me if it helps. :)