PreFiXAUT PreFiXAUT - 25 days ago 8
Sass (Sass) Question

SASS Color Parameter always null

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.

Answer

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

Comments