title: SCSS change variable out of scope from inside @if
body: <p>Is there any workaround for the situation, when you want to modify a variable outside of the scope of your function? :</p>
  
  <pre><code>$ui-theme: 'pink';
  
  @if $ui-theme == "pink" {
      $ui-main: #eb82b0;  
      $ui-secondary: #fff5f9;
      $ui-third: #f6c2d9;
  } @else {
      $ui-main: #ff8067;  
      $ui-secondary: #fff6e5;
      $ui-third: #ffb1a2;
  }
  
  a { color: $ui-main; background: $ui-secondary };
  </code></pre>
  
  <p>I want to create a global variable called <code>ui-theme</code> which will define <code>$ui-main, $ui-secondary...</code> in all other code written below the definition. It seems that the variable scope is also applied when using directives like <code>@if</code>.</p>
  
  <p>Does anyone knows how can this be achieved?</p>