Search code examples
csssassgulp-sassnode-sass

How to check undefined variable in sass


iam trying to set color var in local (site specific) and a global(generic) sass file to add colors to websites in AEM. I have followed following approaches to check undefined. But none of them seems to be working. getting undefined variable $light-gray... Iam using gulp sass 4.0.1

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

What would be the other approach


Solution

  • I figured the issue. Its giving undefined coz i was defining @if variable-exists($my-variable) not @if variable-exists(my-variable) .. Since only string is being considered as param in @if condition., and using @, It is converting the entire variable including @ and getting var undefined.

    Hence answer is @if variable-exists(my-variable)

    Another interesting I have found is, the variable we are defining should not be any standard color code value. If defined any standard colorcode, SASS automatically throws an error 'param should be a string'... 'standard color code cannot be considered as srting'...

    e.g. @gray: #ccc ., on passing gray as a variable name, SASS throws an error saying 'it is expecting string'.

    Thought this additional input might help few people.