css - 如何检查sass中的 undefined variable

Question

我正在尝试在本地(特定于站点)和全局(通用)sass 文件中设置颜色变量，以将颜色添加到 AEM 中的网站。我按照以下方法检查未定义。但他们似乎都没有工作。获取 undefined variable $light-gray...我正在使用 gulp sass 4.0.1

@if variable-exists($light-gray) {
		color: $light-gray;
	}else{
		color: lightgray;
	}
  
  /*------------------------------------------*/
  
  if($light-gray, $light-gray, lightgray)

另一种方法是什么

Answer 1

我想通了这个问题。它给出 undefined 因为我正在定义 @if variable-exists($my-variable) 而不是 @if variable-exists(my-variable) .. 因为在 @if 条件下只有字符串被认为是参数., 并使用@，它正在转换包括@在内的整个变量并得到 var undefined。

因此答案是@if variable-exists(my-variable)

我发现的另一个有趣的是，我们定义的变量不应该是任何标准颜色代码值。如果定义了任何标准颜色代码，SASS 会自动抛出错误 'param should be a string'... 'standard color code cannot be considered as srting'...

例如@gray: #ccc ., 在将 gray 作为变量名传递时，SASS 会抛出一个错误，提示“它需要字符串”。

认为这个额外的输入可能对少数人有帮助。