CODEWITHSUNDEEP
functionvariablessass
limitlessloop
limitlessloop

Reputation: 1474

Can I use a variable for a function name?

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?

Upvotes: 2

Views: 107

Answers (3)

cimmanon
cimmanon

Reputation: 68319

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.

Upvotes: 2

JA9
JA9

Reputation: 1778

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

Upvotes: -2

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

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/

Upvotes: 1

Related Questions