Playground

Write Simple CSS, compile it here. The source is compiled by MMO\client\SCSCompiler on the server, with context::density set to 2, php::round() and php::spacing() authorized, and @import refused — the posture the php bridge page recommends for a source the application does not control.

playground.scs
generated css
:root { --colors-primary: #6366f1; --colors-danger: #ef4444; --spacing-sm: 8px; --spacing-md: 16px; --radius-md: 8px; } .button { border: none; display: flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); background: var(--colors-primary); color: white; cursor: pointer; transition: background 150ms ease; } .button:hover { background: #000000; } .button--danger { background: var(--colors-danger); } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } @media (min-width: 768px) { .button { padding: var(--spacing-md) 24px; } }
html to preview
live preview

Everything the compiler understands is on The language, and written down in the reference.

Tags

<#simple css> <#scs> <#playground>