sass - 未加引号的字符串上的 SASS“错误：$color：不是颜色”

Question

我使用 gulp-sass-variables 将变量传递给 sass，它总是会注入一个字符串。

取消引用似乎对我的字符串没有任何影响。

$primary: "#ffffff"; // <- Passed in via gulp-sass-variables

$anchor: scale-color(unquote($primary), $lightness: -14%); // Error: $color: #ffffff is not a color.

我是否unquote以错误的方式使用？

标签： sassgulp-sass

Answer 1

您不需要使用取消引号，只需从颜色中删除双引号就可以了

$primary: #ffffff; 
$anchor: scale-color($primary, $lightness: -14%); 

工作示例：https ://www.sassmeister.com/gist/5db400dc2bd9bb62980a8411f158343e

已编辑

您可以尝试下面的代码并检查它是否有效：

// Thanks Hugo for convert string to number function
// https://hugogiraudel.com
// Thanks @roshanakjamali

// remove space from string
@function str-replace($string, $search, $replace) {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

// convert string to list
@function str-split($string, $separator) {
  $split-arr: ();
  $index: str-index($string, $separator);
  @while $index != null {
    $item: str-slice($string, 1, $index - 1);
    $split-arr: append($split-arr, unquote($item));
    $string: str-slice($string, $index + 1);
    $index: str-index($string, $separator);
  }
  $split-arr: append($split-arr, unquote($string));
  @return $split-arr;
}

// convert string to number
@function number($string) {
  // Matrices
  $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  $numbers: 0 1 2 3 4 5 6 7 8 9;

  // Result
  $result: 0;

  // Looping through all characters
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    $index: index($strings, $character);

    @if not $index {
      @return false;
    }

    $number: nth($numbers, $index);
    $result: $result * 10 + $number;
  }

  @return $result;
}

@function convertStringToColor($colors) {
  $string: str-replace($colors, " ", "");
  $list: str-split($string, ",");
  $red: nth($list, 1);
  $green: nth($list, 2);
  $blue: nth($list, 3);

  $rgb: rgb(number($red), number($green), number($blue));

  @return $rgb;
}

$primary: "255,255,255" !default; // use rgb color without rgb. rgb(255,255,255) => 255,255,255
$anchor: scale-color(convertStringToColor($primary), $lightness: -14%) !default;

工作示例：https ://codepen.io/sunilmca09/pen/eYdojPV