Try it Yourself: Sass Variables

Sass Variables

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<p>Sample paragraph text styled by the compiled body rule.</p>

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
  Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
  var sass = new Sass();
  var scss = "$primary-color: #3454d1;\n$font-stack: 'Helvetica Neue', Arial, sans-serif;\n$base-spacing: 8px;\n\nbody {\n  font-family: $font-stack;\n  color: $primary-color;\n  margin: $base-spacing * 2;\n}";
  sass.compile(scss, function (result) {
    if (result && typeof result.text === "string") {
      document.getElementById("compiled-css").textContent = result.text;
    } else {
      var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
      var pre = document.createElement("pre");
      pre.style.color = "#b00020";
      pre.style.whiteSpace = "pre-wrap";
      pre.style.fontFamily = "monospace";
      pre.style.padding = "16px";
      pre.textContent = "Sass compile error:\n" + msg;
      document.body.prepend(pre);
    }
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<p>Sample paragraph text styled by the compiled body rule.</p>

<script src="https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js"></script>
<script>
  Sass.setWorkerUrl('https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.worker.js');
  var sass = new Sass();
  var scss = "$primary-color: #3454d1;\n$font-stack: 'Helvetica Neue', Arial, sans-serif;\n$base-spacing: 8px;\n\nbody {\n  font-family: $font-stack;\n  color: $primary-color;\n  margin: $base-spacing * 2;\n}";
  sass.compile(scss, function (result) {
    if (result && typeof result.text === "string") {
      document.getElementById("compiled-css").textContent = result.text;
    } else {
      var msg = (result && (result.formatted || result.message)) || "Unknown Sass compile error";
      var pre = document.createElement("pre");
      pre.style.color = "#b00020";
      pre.style.whiteSpace = "pre-wrap";
      pre.style.fontFamily = "monospace";
      pre.style.padding = "16px";
      pre.textContent = "Sass compile error:\n" + msg;
      document.body.prepend(pre);
    }
  });
</script>
</body>
</html>