mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 09:27:59 +01:00
66 lines
2.3 KiB
Plaintext
66 lines
2.3 KiB
Plaintext
---
|
|
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>
|