问题描述
我使用 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
?
解决方法
您不需要使用取消引号,只需从颜色中删除双引号即可
$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)),$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,$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
$anchor: scale-color(convertStringToColor($primary),$lightness: -14%) !default;