SCSS compilation is throwing a syntax error isn't a valid CSS value

Question

I've a color palette scss file with a couple of functions, one to get a color and another to get the color but with an opacity. The compilation of that file doesn't throw any error but when I'm going to use the funtion for the opacity, I got an error ("dark": 0.1, "light": 0.8) isn't a valid CSS value and I don't know why.

$my-colors: (
  'default-blue': #0071ce,
  'blue': #064f8e,
  'yellow': #f79428,
  'light-blue': #1888c8,
  'green': #54a546,
  'red': #C82022,
  'pink': #b51e6d,
  'orange': #e54e26
);

$my-opacity: (
  'dark': 1,
  'light': 0.8
);

@function get-color($key: 'default-blue') {
  @return map-get($my-colors, $key);
}

@function get-color-alpha($name: 'default-blue', $opacity: 'dark') {
  $color: get-color($name);
  // Get the named opacity level, if it exists
  @if map-key-exists($my-opacity, $opacity) {
    $opacity: map-get($my-opacity, $opacity);
  }

  // Use rgba() to manipulate the color's alpha level
  @return rgba($color, $opacity);
}

I'm using the function like this:

li h3 {
    color: get-color-alpha('default-blue', 'light');
}

I ran your exact code using node-sass 4.8.3 and properly compiled the following css: li h3 { color: rgba(0, 113, 206, 0.8); } — doppler
– doppler, Commented Jul 23, 2018 at 17:36

ReSedano · Accepted Answer · 2018-07-23 22:40:45Z

I looked for the problem directly in sass v3.5.6 documentation and I discovered that the error is caused by "map-key-exists" function: http://sass-lang.com/documentation/Sass/Script/Functions.html.

I didn't find that function, but rather I found that to know if a map has a value associated with a key, you have to use map-has-key($map, $key). So, if you change it and write something like this:

$my-colors: (
  'default-blue': #0071ce,
  'blue': #064f8e,
  'yellow': #f79428,
  'light-blue': #1888c8,
  'green': #54a546,
  'red': #C82022,
  'pink': #b51e6d,
  'orange': #e54e26
);

$my-opacity: (
  "dark": 1,
  "light": 0.8
);

@function get-color($key: 'default-blue') {
  @return map-get($my-colors, $key);
}

@function get-color-alpha($name: 'default-blue', $opacity: 'dark') {
  $color: get-color($name);
  // Get the named opacity level, if it exists
  @if map-has-key($my-opacity, $opacity) {
    $opacity: map-get($my-opacity, $opacity);
  }

  // Use rgba() to manipulate the color's alpha level
  @return rgba($color, $opacity);
}

li h3 {
  color: get-color-alpha('default-blue', 'light');
}

our beautifull sass version 3.5.6 compiles:

li h3 {
  color: rgba(0, 113, 206, 0.8);
}

"WOW! Finally it works!" I said! :D

Collectives™ on Stack Overflow

SCSS compilation is throwing a syntax error isn't a valid CSS value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related