Compile Sass in Browser

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css"> 
    
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="https://cdn.rawgit.com/medialize/sass.js/master/dist/sass.min.js"></script>
    
    
  </head>

  <body>
  
  <form>
     <input id="palette-1" name="palette-1" value="red" type="text">
  <input id="palette-2" name="palette-2" value="green" type="text">
  <input id="palette-3" name="palette-3" value="blue" type="text">
  
  </form>
  
  <button id="processScss">Process</button>
 
    
    <div class="component--1">
      <div class="component--1__title">Title</div>
      <div class="component--1__body">Body</div>
    </div>
    
    <div class="component--2">
      <div class="component--2__title">Title</div>
      <div class="component--2__body">Body</div>
    </div>
    
    <div class="component--3">
      <div class="component--3__title">Title</div>
      <div class="component--3__body">Body</div>
    </div>
    
    <script src="script.js"></script>
  </body>

</html>

// Code goes here


jQuery.extend({
    getValues: function(url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            dataType: 'text',
            async: false,
            success: function(data) {
                result = data;
            }
        });
       return result;
    }
});


function getScssVars() {
  var palette1 = document.getElementById("palette-1").value;
  var palette2 = document.getElementById("palette-2").value;
  var palette3 = document.getElementById("palette-3").value;
  var scssVars = "$palette-1:" + palette1 + ";" + "$palette-2:" + palette2 + ";" + "$palette-3:" + palette3 + ";";
  return scssVars;
}




$('#processScss').click(function(){
  var scssVars = getScssVars();
  var scss = $.getValues("_import.scss");
  var css = Sass.compile(scssVars + scss);
  head = document.head || document.getElementsByTagName('head')[0],
  style = document.createElement('style');

  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  
  head.appendChild(style);
});

/* Styles go here */



%component {
  padding: 20px;
  margin: 20px;
}

.component--1 {
  @extend %component;
  background: $palette-1;
  color: lighten($palette-1, 30%);
}

.component--2 {
  @extend %component;
  background: $palette-2;
  color: lighten($palette-2, 30%);
}

.component--3 {
  @extend %component;
  background: $palette-3;
  color: lighten($palette-3, 30%);
}