SASS Color Parameter always null

Question

I have a custom mixin in SASS to generate a table and it takes simply some arguments for generating the colors and little details. This is the beginning:

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
  @debug "Background: #{$background}";
  @debug "Foreground: #{$foreground}";
  $background-hover: hover($background) !default;
  $foreground-hover: hover($foreground) !default;

The issue is that I always get an error with my hover-color function that color is NULL, even if I pass normal values to it (used debugging to see if they contain stuff or not). This is the function:

@function hover($color, $ratio: 15%) {
  @if (lightness($color) > 50%) {
    @return darken($color, $ratio);
  } @else {
    @return lighten($color, $ratio);
  }
}

It gives me this error: Error: $color: null is not a color for `lightness' which doesn't make sense at all.

Now, as I was trying stuff out I figured that when I pass the values directly to the function (within the mixin) it works. So what is going on/what can I do to fix this issue?

EDIT: How I call the mixin:

table {
    @include generate-table($background: #FFF, $foreground: #000);

I also tried using the colors as strings like this:

table {
    @include generate-table($background: '#FFF', $foreground: '#000');

and of course without direct assiciation like thas as well:

table {
    @include generate-table(#FFF, #000);

which all had the same result.

can you add the code of lightness ,darken mixins too and where are u calling this generate-table — Geeky
Added how I call generate-table and the functions lightness, darken and lighten are basic functions from sass, see: sass-lang.com/documentation/Sass/Script/Functions.html — PreFiXAUT

Geeky Geeky · Accepted Answer · 2016-11-07T19:16:27

change the statements to these,it should work

@function hover($color, $ratio: 15%) {

  @if (lightness($color) > 50%) {
    @return darken($color, $ratio);
  } @else {
    @return lighten($color, $ratio);
  }
}

@mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
  $background-hover:hover($color:$background)!default;
  $foreground-hover:hover($color:$foreground) !default;
}

table{
  @include generate-table($background:#FFFFFF,  $foreground:#000000);
}

Hope this helps

SASS Color Parameter always null

1 Answers