CODEWITHSUNDEEP
sass
Mark Handy
Mark Handy

Reputation: 1256

SASS mixing and passing a variable string that's a function name

I'm expanding out a SASS mixin for generating background colours.

Here's my mixin:

@mixin color-columns ($count, $baseName, $startcolor) {
  $loop_color : $startcolor;
  @for $i from 0 through $count {
    $loop_color : darken($loop_color, 8%);
    .#{$baseName}-#{$i} {
      background-color : $loop_color;
    }
  }
}

And i use it like this:

@include color-columns(5,'col', $blue);

What I want to do is pass in either 'darken' or 'lighten' as a variable so i can control with SASS colour function. Something like this:

@mixin color-columns ($count, $baseName, $startcolor, $change: 'darken') {
  $loop_color : $startcolor;
  
  @for $i from 0 through $count {
    $loop_color : $change($loop_color, 8%);
    .#{$baseName}-#{$i} {
      background-color : $loop_color;
    }
  }
}

When i try that, my CSS for the first column is like this:

    background-color: darken darken #005387, 8%, 8%;

I'm missing the connection on passing a variable that swaps the function.

Upvotes: 3

Views: 2215

Answers (2)

Marvin
Marvin

Reputation: 10092

Currently there is no support for defining dynamic function names. It has been requested several years ago and there is even an open pull request for this functionality but it is not yet merged.

However, it is possible to dynamically call a function with the built-in call($function, $args...) function. It allows you to avoid if-else cascades and can be used in your example like this:

$loop_color : call($change, $loop_color, 8%);

Upvotes: 3

Mark Handy
Mark Handy

Reputation: 1256

I ended up adding an @if to get this to work:

@mixin color-columns ($count, $startcolor, $start : darken) {
  $loop_color : $startcolor;

  @if $start == 'lighten' {
    @for $i from 0 through $count {
      $loop_color : lighten($loop_color, 5%);
      .conBG-#{$i} {
        background-color : $loop_color;
      }
    }
  }
  @else {
    @for $i from 0 through $count {
      $loop_color : darken($loop_color, 5%);
      .conBG-#{$i} {
        background-color : $loop_color;
      }
    }
  }
}

Upvotes: 0

Related Questions