title: SCSS/SASS conditionalize a variable
body: <p>I am trying to see if there is a way to conditionals a variable in my scss. The scenario being for a fallback font loader throwing a class on my body when all fonts are loaded - so I could switch out fonts.</p>
  
  <p>So the idea is I have my _variables.scss file set up, and inside it has all my site fonts looking something like this -</p>
  
  <pre><code>$primary-font-family: 'Font1', sans-serif;
  $primary-font-normal: 400;
  $primary-font-bold: 700;
  
  $secondary-font-family: 'Font2', serif;
  $secondary-font-normal: normal;
  $secondary-font-bold: normal;
  </code></pre>
  
  <p>This has been working great for me, but I am looking for an easy way to swap them out without added class listeners in the css to every instance where I am consuming these fonts. So I was wondering if there might be a way to conditionalize these variables -</p>
  
  <pre><code> // if .fonts-loaded class is on body, use loaded font
   $primary-font-family: 'Font1', sans-serif;
   // else use system default font
   $primary-font-family: 'defaultSystemFont', sans-serif;
  </code></pre>
  
  <p>Unsure if something like this would be possible, does anyone know of a way to achieve this. Thanks for reading!</p>