title: How to check in SCSS if a variable exists and ha a value?
body: <p>I am new in SCSS so bear with me :)</p>
  <p>I have a use case where a SCSS variable <code>--my-variable</code> can exist and can have a value depending on some settings from the backend. So, if <code>--my-variable</code> exists and has a value I should override some styling. If not I shouldn't override anything.</p>
  <p><strong>Example:</strong></p>
  <p>In file1 I have:</p>
  <pre><code>.my-div {
      color: red;
      }
  </code></pre>
  <p>In file2 I should have something like this:</p>
  <pre><code>.my-div {
  @include customize(color, --my-variable);
  }
  
  @mixin customize($property, $variable) {
    @if $variable and (var($variable)) {
      #{$property}: var($variable);
    }
  }
  </code></pre>
  <p><strong>The problem is</strong> that the <code>if</code> condition inside the mixin <code>customize()</code> is always true even if my document has no CSS variable called <code>--my-variable</code>. What am I doing wrong?
  Thank you</p>