Closed TeoAlmonte closed 7 years ago
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. :)
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?
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.