时间戳

首页 > 解决方案 > Sass 返回“错误：("primary": #0075dd !important, ...) 不是有效的 CSS 值。” 动态创建新地图时

list - Sass 返回“错误：("primary": #0075dd !important, ...) 不是有效的 CSS 值。” 动态创建新地图时

问题描述

每当我运行时，sass --watch src/sass:dist/css我都会从命令行收到此错误

错误： ("primary": #0075dd !important, "secondary": #6b7a93 !important, "sucess": #1eaf3e !important) 不是有效的 CSS 值。

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

这是一些代码片段。

_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;

我希望你能帮我解决这个问题。谢谢你。

标签： listdictionarysasspartialsdart-sass

解决方案

发现了问题。我希望这将帮助那些也在为同样的问题而苦苦挣扎的人。

使用颜色模块时：

@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);

所以解决方案是!important在我的变量声明中删除：

$blue: "#0000ff"

像这样，而是把它放在我的地图上：

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

推荐阅读