Compiler error: argument $color of lightness($color) must be a color

[emyarod]

It seems that libsass 3.3.3 or higher throws an error when passing a color into this a function I've written:

Error:

argument `$color` of `lightness($color)` must be a color
Backtrace:
    sass/utils/_functions.scss:6, in function `lightness`
    sass/utils/_functions.scss:6, in function `set-text-color`
    sass/components/_buttons.scss:214

the function in question:

// dynamic text color
@function set-text-color($bg-color) {
  // if background color is light, return dark colored text
  @if (lightness($bg-color) > 50) { @return $dark-text; }
  // if background color is dark, return light colored text
  } @else { @return $light-text;  }
}

However, when I compile my Sass source files in node-sass 3.4.2 (which uses libsass 3.3.2), or if I compile using sass.js 0.9.4 (which uses libsass 3.3.1), everything compiles fine.

[mgreter]

Duplicate of #1969 (found via search - please try to use it before opening new issues) and already fixed!
BTW: your posted sample contains an small error and therefore doesn't compile!

[emyarod]

I apologize, the function does not contain that typo in the source. It must have occurred when I was copy pasting it, so it contains the extra brace. However, the problem still persists in libsass 3.3.5, which fixes issue #1969.

the correctly edited and entire function, for reference:

// dynamic text color
@function set-text-color($bg-color) {
  // if background color is light, return dark colored text
  @if (lightness($bg-color) > 50) { @return $dark-text; }
  // if background color is dark, return light colored text
  @else { @return $light-text; }
}

// dynamic text colors
@function set-text-color($bg-color, $text-type) {
  // if bgc is light, return dark colored text
  @if (lightness($bg-color) > 50) {
    @if ($text-type == text) {
      @return $light-text;
    } @else if ($text-type == secondary-text) or if ($text-type == icons) {
      @return $light-secondary-text;
    } @else if ($text-type == hint-text) or if ($text-type == disabled-text) {
      @return $light-disabled-text;
    } @else if ($text-type == divider-text) {
      @return $light-divider-text;
    }
  // if bgc is dark, return light colored text
  } @else if ($text-type == text) {
    @return $dark-text;
  } @else if ($text-type == secondary-text) or if ($text-type == icons) {
    @return $dark-secondary-text;
  } @else if ($text-type == hint-text) or if ($text-type == disabled-text) {
    @return $dark-disabled-text;
  } @else if ($text-type == divider-text) {
    @return $dark-divider-text;
  }
}

[mgreter]

I'm sorry, but I cannot reporoduce it

[emyarod]

I only receive this error when compiling with node-sass or sass.js builds based on libsass 3.3.1 or higher. I've spoken to the sass.js developer about this issue persisting in the latest release, but he was confident that the error was being thrown by libsass. Is there anything else I can provide to help you reproduce the bug?

[xzyfer]

@emyarod how are you calling this function that produce the error?

[emyarod]

@xzyfer

argument `$color` of `lightness($color)` must be a color
Backtrace:
    sass/flattish/utils/_functions.scss:6, in function `lightness`
    sass/flattish/utils/_functions.scss:6, in function `set-text-color`
    sass/flattish/components/_buttons.scss:214

I'm using this function to style an element's text color based on its background color. In this instance, I'm styling buttons, whose background colors are first assigned in a Sass map and then passed into the set-text-color function.

Here is the referenced portion in _buttons.scss:

// flat buttons with color bg
@if #{$button-type} == 'flat-colorized-bg-button' {
  @if $background-color != $primary {
    #{$selector-name} {
      color: set-text-color($background-color, text) !important;

      @include ripple($background-color, $ripple-color);

      &:hover { background-color: $hover-color !important; }
    }
  } @else {
    $flat-colorized-bg-button-selectors: append($flat-colorized-bg-button-selectors, unquote('#{$selector-name}'), 'comma');
  }
}

If more context is required, here is the source for _functions.scss and _buttons.scss

Please let me know if any additional information is needed!

[mgreter]

I would suggest to try to compile it with official ruby sass as it yields the same error!
And it would have helped if you had included the link to your repo in the initial post!

[emyarod]

When compiling using the official Ruby Sass compiler, this error is thrown:

Error: $color: null is not a color for `lightness'
        on line 6 of utils/_functions.scss
        from line 10 of flattish.scss
  Use --trace for backtrace.