title: SCSS Theming with Dynamic Variables
body: <h1>Hi All!</h1>
  
  <p>I'm currently working on a theming feature for a CSS Framework and have run into some issues that I'm hoping you might be able to help out with.</p>
  
  <hr>
  
  <p>I have created a SASS Map called <code>$themes</code>, which contains colors for different themes. I copy-pasted some code from a medium article(who doesn't) and boom my theming works!
  <strong>But...</strong><br>
  This:</p>
  
  <pre><code>@include themify($themes) {
      .btn {
          color: themed('blue');
      }
  }
  </code></pre>
  
  <p>on. every. component. is sloppier code than what I deem maintainable across the copious amounts of styling I'll be doing.<br>
  <strong>So...</strong></p>
  
  <h3>My Goal</h3>
  
  <hr>
  
  <p>I'd like to do something super hacky and awesome like this:</p>
  
  <pre><code>@include themify($themes) {
      $blue: themed(blue);
  }
  </code></pre>
  
  <p>I want to theme the variables so all I have to do is add <code>$blue</code> and not a lot of calling mixins and unnecessary mumbo jumbo.<br>
  If I could get something like this to work it would look something like this:</p>
  
  <pre><code>.btn {
      background: $blue;
  }
  </code></pre>
  
  <p>All of the theming would be taken care of beforehand!<br>
  But of course it's never that easy because it doesn't work... It would be a godsend if one of you awesome <code>sass</code> magicians could pull some magic with this, I will include you in the source code of awesome contributors.</p>
  
  <h3>The Code</h3>
  
  <hr>
  
  <p>The <code>$themes</code> sass-map:</p>
  
  <pre><code>$themes: (
      light: (
          'blue': #0079FF
      ),
      dark: (
          'blue': #0A84FF
      )
  );
  </code></pre>
  
  <hr>
  
  <p>The copypasta mixin from this awesome <a href="https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1" rel="noreferrer">Medium Article</a>:</p>
  
  <pre><code>@mixin themify($themes) {
    @each $theme, $map in $themes {
      .theme-#{$theme} {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
      }
    }
  }
  
  @function themed($key) {
    @return map-get($theme-map, $key);
  }
  </code></pre>
  
  <hr>
  
  <p>Any suggestions on how to accomplish this would be 100% appreciated. Appreciated enough to add you into the source code as an awesome contributor.
  <br><br>
  Thanks in Advance!</p>