Can I use a variable for a function name? - function

Question

I'm trying to loop through a list which automates several functions. Unfortunately the function is not evaluated.
For example:
$colors:
red,
blue,
green;
#each $color in $colors{
.color-#{$color} {
value: $color(#F15258);
}
}
(I've simplified my example code to make it easier to illustrate).
Unfortunately this just outputs the value of $key and the color #F15258.
ie:
value: red #F15258;
Can I get SASS to pass in the variable as the function name so it actually evaluates `red(#F15258)?
It should output:
value: 241;
Any thoughts?

Answer 1

As of Sass 3.3 you can do this using the call() function:
$colors:
'red',
'blue',
'green';
#each $color in $colors{
.color-#{$color} {
value: call($color, #F15258);
}
}
Output:
.color-red {
value: 241;
}
.color-blue {
value: 88;
}
.color-green {
value: 82;
}
Note that your variables must be a string: red is a Color while 'red' is a String.

Answer 2

SASS does not allow dynamic names, and that's a good thing.
To use a dynamic name, you'll have to use a template to generate your SASS prior to compiling it. See how Compass does it: https://stackoverflow.com/a/16129685/901944
This increases the complexity of your project greatly and i strongly advise against.
Instead, use a function that accepts the name as a parameter:
#function parse-color($color) {
// Do whatever you want here
}
.color-red {
color: parse-color(red);
}
Note that instead of hardcoding the second color you can have it as an argument with a default value:
#function parse-color($first-color,
$second-color: #F15258) {
// Do whatever you want here
// For example:
#return mix($first-color, $second-color);
}
$colors:
red,
blue,
green;
#each $color in $colors{
.color-#{$color} {
color: parse-color($color);
}
}
See a demo: http://sassbin.com/gist/6193779/

Answer 3

The variable with multiple values are called as lists in sass.
so,
you can make a list like:-
$colors: red blue green; //list of colors
#each $color in $colors{
.color-#{$color} {
color: ($color);
}
}