1

Whenever I run sass --watch src/sass:dist/css I got this error from the command line

Error: ("primary": #0075dd !important, "secondary": #6b7a93 !important, "sucess": #1eaf3e !important) isn't a valid CSS value.

$map-theme-colors-rgb: create-map($map-theme-colors, convert-to-rgb, "value") !default;                                                             ^^^^^^^^^^^^^

Here's some of the code snippet.

_functions.scss

@function create-map($map, $callback-func, $args...) {
  $_created-map: ();

  @each $key, $value in $map {
    $_args: ();
    @each $arg in $args {
      $_args: append(
        $_args, if($arg == "key", $key, if($arg == "value", $value, $arg))
      );
    }

    $_created-map: map.map-merge(
      $_created-map,
      meta.call(meta.get-function($callback-func), $_args...)
    );
  }

  @return $_created-map;
}

_variables.scss

$map-theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "sucess":     $sucess
) !default;

$map-theme-colors-rgb: create-map($map-theme-colors, convert-to-rgb, "value") !default;

I hope you could help me with this. Thank you.

1 Answer 1

1

Found the problem. I hope this will help those who are also struggling with the same problem.

When you use the color module:

@use "sass:color";

$color: "#ffbbcc"
$important-color: "#ffbbcc" !important;

// Sample function
@function toRGB($value) {
  @return color.red($value), color.green($value), color.blue($value)
}

// $color is passed as "#ffbbcc" without the quotes
// and no problem.
$color-in-rgb: toRGB($color); 


// but $important-color is passed as "#ffbbcc !important" without
// the quotes and throws an error because while #ffbbcc is a valid
// CSS color in hexadecimal, !important is not!
$important-color-in-rgb: toRGB($important-color);

So the solution was to remove the !important in my variable declarations:

$blue: "#0000ff"

Like so, and instead place it on my map:

$some-color-map: (
  "blue": $blue !important
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.