sass-site/source/playground.liquid

---
layout: base
title: Playground
is_playground: true
---

<div class="sl-c-playground" data-compiler-has-error="false">
  <div class="sl-c-playground__code-editor-wrapper sl-c-playground__panel" data-code="source">
    <div class="sl-c-playground__editor-tabbar" data-setting="inputFormat">
      <button
        type="button"
        data-value="scss"
        data-active="true"
        data-tabbar="item"
        class="sl-c-button sl-c-button--tab"
        data-setting="inputFormat">SCSS</button>
      <button
        type="button"
        data-value="indented"
        data-active="false"
        data-tabbar="item"
        class="sl-c-button sl-c-button--tab"
        data-setting="inputFormat">Sass</button>
      <span data-tabbar="item" class="sl-c-playground__tabbar-title tabbar-title sl-c-playground__tabbar-version"></span>
    </div>
    <div class="sl-c-playground__panel-content sl-code-is-source"></div>
  </div>
  <div class="sl-c-playground__code-editor-wrapper sl-c-playground__panel" data-code="compiled">
    <div class="sl-c-playground__editor-tabbar" data-setting="outputFormat">
      <button
        type="button"
        data-value="expanded"
        data-active="true"
        data-tabbar="item"
        class="sl-c-button sl-c-button--tab"
        data-setting="outputFormat">Expanded</button>
      <button
        type="button"
        data-value="compressed"
        data-active="false"
        data-tabbar="item"
        class="sl-c-button sl-c-button--tab"
        data-setting="outputFormat">Compressed</button>
      <span data-tabbar="item" class="sl-c-playground__tabbar-title tabbar-title">
        <strong>CSS</strong>
        (Compiled)
      </span>
    </div>
    <div class="sl-c-callout sl-c-callout--warning sl-c-playground__error">Please resolve error to view compiled CSS.</div>
    <div class="sl-c-playground__panel-content sl-code-is-compiled"></div>
  </div>
  <div class="sl-c-playground__console-wrapper sl-c-playground__panel">
    <div class="sl-c-playground__editor-tabbar">
      <span data-tabbar="item" class="sl-c-playground__tabbar-title">
        Console
      </span>
    </div>
    <pre class="sl-c-playground__console sl-c-playground__panel-content"></pre>
  </div>
</div>

<script
  type="module"
  src="/assets/dist/js/playground.js"
  async></script>