Try it Yourself: Sass Extend

Sass Extend

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<div class="message">Base message</div>
<div class="message-success">Success message</div>

<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 = ".message {\n  padding: 0.75em 1em;\n  border-radius: 4px;\n  border: 1px solid transparent;\n}\n\n.message-success {\n  @extend .message;\n  background-color: #f0fff4;\n  border-color: #38a169;\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>
<div class="message">Base message</div>
<div class="message-success">Success message</div>

<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 = ".message {\n  padding: 0.75em 1em;\n  border-radius: 4px;\n  border: 1px solid transparent;\n}\n\n.message-success {\n  @extend .message;\n  background-color: #f0fff4;\n  border-color: #38a169;\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>