CSS preprocessors. They add variables, nesting, mixins and loops to CSS, then compile it all down to the plain CSS browsers understand. SCSS is Sass's CSS-like syntax; Less is a similar, JavaScript-based alternative.
This runs the real Sass compiler in your browser. Edit the SCSS on the left — with a variable, nesting, a mixin and a @for loop — and watch it compile to plain CSS on the right in real time.
Loading the Sass compiler…Variables ($brand) keep values in one place; nesting mirrors your HTML structure so selectors read top-down. Load this snippet into the compiler above to see how nested rules flatten into normal CSS selectors.
@for loop generates a colour scalePreprocessors can compute CSS. The loop below emits five spacing utilities and a tint scale from a single line. Load it, then watch the swatches below render from the compiled output.
A @mixin is a parametrised block you @include wherever you need it — like a function that returns CSS. Load this to see one mixin expand into several full rule-sets.
Less covers the same ground — variables, nesting, mixins — with slightly different syntax. Variables use an @ sigil instead of $, and mixins are just regular classes you call by name. The big practical difference is that Sass became the de-facto standard, while Less powered older Bootstrap 3.
// Less syntax
@brand: #6d5efc;
.card {
color: @brand;
.title { font-weight: 700; } // nesting
}
.rounded(@r: 8px) { border-radius: @r; } // mixin
.box { .rounded(12px); } // call it
sass.js) running entirely in your browser — what you type is genuinely compiled by Sass, not faked. A little vanilla JavaScript wires the editor to the compiler and renders the swatch preview. If the CDN ever fails to load, the panel shows a clear error instead of pretending. The Less section is illustrative code. Shared CSS shell styles the page.