0

I am new in SCSS so bear with me :)

I have a use case where a SCSS variable --my-variable can exist and can have a value depending on some settings from the backend. So, if --my-variable exists and has a value I should override some styling. If not I shouldn't override anything.

Example:

In file1 I have:

.my-div {
    color: red;
    }

In file2 I should have something like this:

.my-div {
@include customize(color, --my-variable);
}

@mixin customize($property, $variable) {
  @if $variable and (var($variable)) {
    #{$property}: var($variable);
  }
}

The problem is that the if condition inside the mixin customize() is always true even if my document has no CSS variable called --my-variable. What am I doing wrong? Thank you

Hamza Dahmoun
  • 1,204
  • 10
  • 16
  • 1
    As of Sass 3.3 there is a variable-exists() function. – Shaheer Izhar Sep 22 '21 at 08:21
  • Does this answer your question? [Checking if a variable is defined in SASS](https://stackoverflow.com/questions/8512802/checking-if-a-variable-is-defined-in-sass) – mahan Sep 22 '21 at 08:22

1 Answers1

0

Sass has a function that check if the variable exists.

variable-exists()

$colorVariable: crimson;

@if variable-exists($colorVariable) {
   // Do some styling if the variable exists
}
JayDev95
  • 777
  • 2
  • 5
  • 18