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
I figured out the issue. The problem was that I was using @if variable-exists($my-variable) instead of @if variable-exists(my-variable). The reason is that the @if condition expects a string as a parameter. When you use the @ symbol, SASS treats the entire variable (including the @) as part of the name, which results in an "undefined" error.
So the correct syntax is: @if variable-exists(my-variable).
Another interesting thing I discovered is that if you define a variable with a standard color code (e.g., @gray: #ccc), SASS throws an error like "parameter should be a string." This happens because SASS doesn't treat standard color codes as strings. If you try to use a variable like gray in this case, SASS will expect a string, not a color value.
Just thought this extra info might help someone else!