SASS“错误:$color:不是颜色"在未加引号的字符串上 [英] SASS "error: $color: is not a color" on unquoted string
问题描述
我使用 gulp-sass-variables 将变量传递给 sass,它总是会注入一个字符串.
取消引用似乎对我的字符串没有任何影响.
$primary: #ffffff";//<- 通过 gulp-sass-variables 传入$anchor: scale-color(unquote($primary), $lightness: -14%);//错误:$color: #ffffff 不是颜色.
我是否以错误的方式使用了 unquote
?
你不需要使用 unquote,只需从 color 中删除双引号就可以了
$primary: #ffffff;$anchor: scale-color($primary, $lightness: -14%);
工作示例:https://www.sassmeister.com/gist/5db400dc2bd9bb621980e/p> 已编辑 你可以试试下面的代码并检查它是否有效: 工作示例:https://codepen.io/sunilmca09/pen/eYdojPV I am passing in variables to sass using gulp-sass-variables, which will always inject a string. Unquote doesn't seem to have any effect on my string. Am I using You don't need to use unquote, just remove double quotes from color and it should work Working example: https://www.sassmeister.com/gist/5db400dc2bd9bb62980a8411f158343e Edited Can you try the code below and check that if it works: Working example: https://codepen.io/sunilmca09/pen/eYdojPV 这篇关于SASS“错误:$color:不是颜色"在未加引号的字符串上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!//感谢 Hugo 将字符串转换为数字函数//https://hugogiraudel.com//谢谢@roshanakjamali//去除字符串中的空格@function str-replace($string, $search, $replace) {$index: str-index($string, $search);@if $index {@return str-slice($string, 1, $index - 1) + $replace +字符串替换(str-slice($string, $index + str-length($search)),$搜索,$替换);}@return $string;}//将字符串转换为列表@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;}//将字符串转换为数字@函数编号($string) {//矩阵$strings:0"1"2"3"4"5"6"7"8"9";$数字:0 1 2 3 4 5 6 7 8 9;//结果$结果:0;//遍历所有字符@for $i 从 1 到 str-length($string) {$character: str-slice($string, $i, $i);$index: index($strings, $character);@如果不是 $index {@return 假的;}$number: nth($numbers, $index);$result: $result * 10 + $number;}@return $result;}@function convertStringToColor($colors) {$string: str-replace($colors, " ", "");$list: str-split($string, ",");$red: 第n($list, 1);$green: nth($list, 2);$blue: nth($list, 3);$rgb: rgb(number($red), number($green), number($blue));@return $rgb;}$primary: 255,255,255"!默认;//使用不带 rgb 的 rgb 颜色.rgb(255,255,255) =>255,255,255$anchor: scale-color(convertStringToColor($primary), $lightness: -14%) !default;
$primary: "#ffffff"; // <- Passed in via gulp-sass-variables
$anchor: scale-color(unquote($primary), $lightness: -14%); // Error: $color: #ffffff is not a color.
unquote
in the wrong way?$primary: #ffffff;
$anchor: scale-color($primary, $lightness: -14%);
// 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;