Try it Yourself: Sass Nesting

Sass Nesting

<!DOCTYPE html>
<html>
<head>
<style id="compiled-css"></style>
</head>
<body>
<nav class="site-nav"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li></ul></nav>

<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 = ".site-nav {\n  background: #222;\n\n  ul {\n    list-style: none;\n    margin: 0;\n  }\n\n  li {\n    display: inline-block;\n  }\n\n  a {\n    color: white;\n    text-decoration: none;\n  }\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>
<nav class="site-nav"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li></ul></nav>

<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 = ".site-nav {\n  background: #222;\n\n  ul {\n    list-style: none;\n    margin: 0;\n  }\n\n  li {\n    display: inline-block;\n  }\n\n  a {\n    color: white;\n    text-decoration: none;\n  }\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>