如何检查 sass 中的未定义变量

Question

iam 尝试在本地（特定于站点）和全局（通用）sass 文件中设置颜色 var 以向 AEM 中的网站添加颜色。我按照以下方法检查未定义。但其中 none 似乎有效。获取未定义的变量 $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) not @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 会抛出一条错误消息 'it is expecting string'.

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

如何检查 sass 中的未定义变量

How to check undefined variable in sass

css

sass

node-sass

gulp-sass