title: CSS variables with fallback for older browsers
body: <p>TL;DR: How can you use SCSS to have CSS variables with a fallback for older browsers.</p>
  
  <p>I'm trying to make sense of this <a href="https://codepen.io/jakealbaugh/post/css4-variables-with-fallbacks-using-sass" rel="noreferrer">article</a>. In my opinion, you have to already be an advanced SASS user to understand it, which I'm not. To make matters worse, it's the only article I found on the subject.</p>
  
  <p>Here is what I'm trying to achieve:</p>
  
  <p>My <strong>scss</strong> should be along the lines of :</p>
  
  <pre><code>body {
    @include v(background-color, primary)
  }
  </code></pre>
  
  <p>then the processed <strong>CSS</strong> should be</p>
  
  <pre><code>body{
     background: yellow; /* Yellow being defined above as the primary color */
     background: var(--color-primary);
  }
  </code></pre>
  
  <p>By playing around a bit, I can already get the value of the CSS variable like so:</p>
  
  <pre><code>$colors: (
    primary: yellow,
  );
  
  :root {
    @each $name, $color in $colors {
      --color-#{$name}: $color;
    }
  }
  
  @mixin background-color($color_) {
    background: var(--color-#{$color_});
  }
  </code></pre>
  
  <p>To use it:</p>
  
  <pre><code>body{
    @include background-color(primary);
  }
  </code></pre>
  
  <p>Which will result in this:</p>
  
  <pre><code>body {
      background: var(--color-primary);
      /* But the fallback is missing :(, I tried  things with the map-get but it's really eluding me... */
  }
  </code></pre>