CSS Tools

All-in-one CSS toolbox: format/beautify, minify/compact, validate syntax, compile SCSS/Sass & LESS to CSS, and reverse-convert CSS back to SCSS or LESS.
All processing happens locally in your browser — your data is never uploaded to any server.
Mode:
Input CSS / SCSS / LESS / SASS
Output
How to use: Paste your CSS/SCSS/LESS/SASS in the left textarea, choose a mode, and click Process (or just type — auto-process on input).
How each mode works
CSS Format: Formats CSS with consistent indentation (2/4 spaces or tabs), one property per line. Handles nested at-rules like @media, @keyframes, @supports. Preserves comments (both /* */ and single-line). Change the Indent selector to switch between 2 spaces, 4 spaces, or tabs.
Minify: Removes all unnecessary whitespace, comments, and redundant characters to produce the most compact CSS. Ideal for production deployment to reduce file size and bandwidth. Check the stats bar to see the compression ratio.
Validate: Parses the CSS and checks for syntax errors. Reports parse errors with exact line and column numbers. Also shows statistics: number of rules, selectors, declarations, and at-rules.
SCSS Format: Reformats SCSS/Sass stylesheets with consistent indentation. Handles all SCSS-specific syntax: $variables, @mixin/@include, @extend, @if/@for/@each control flow, #{$var} interpolation, and // single-line comments. Preserves nested selector structure and properly indents nested blocks. Change the Indent selector to switch between 2 spaces, 4 spaces, or tabs.
LESS Format: Reformats LESS stylesheets with consistent indentation. Handles all LESS-specific syntax: @variables, parametric mixins, guards (when), @{var} interpolation, merging, and // single-line comments. Preserves nested selector structure and properly indents nested blocks. Change the Indent selector to switch between 2 spaces, 4 spaces, or tabs.
SCSS → CSS: Compiles SCSS/Sass stylesheets to plain CSS using the official Dart Sass compiler (v1.102). Supports variables ($var), nesting, mixins (@mixin, @include), functions, @extend, @if/@for/@each control flow, and modern Sass modules (@use, @forward). The Sass compiler (~5.4 MB) is lazy-loaded the first time you use this mode.
LESS → CSS: Compiles LESS stylesheets to plain CSS. Supports variables (@var), nesting, mixins, parametric mixins, operations, functions, guards, and importing (@import). The compiler (~150 KB) is lazy-loaded the first time you use this mode.
SASS → CSS: Compiles indented SASS syntax (.sass files, no braces, no semicolons) to plain CSS using Dart Sass. Indented SASS uses significant whitespace instead of curly braces, which makes it more concise. The same Dart Sass compiler (~5.4 MB) handles both SCSS and indented SASS syntax.
CSS → SCSS: Converts standard CSS to SCSS syntax with automatic nesting refactoring. Detects BEM-like patterns and moves .parent-child selectors into &-child nested blocks. Converts descendant selectors to nested rules, pseudo-class selectors to &:state, and extracts repeated CSS custom properties into SCSS $variables. If your CSS has a flat, repetitive structure, this tool will help you refactor it into cleaner nested SCSS.
CSS → LESS: Converts standard CSS to LESS syntax with automatic nesting refactoring. Same kind of nesting as CSS→SCSS: detects repeated parent patterns, descendant selectors, and pseudo-classes. Extracts repeated CSS custom properties into LESS @variables. The output is clean, nested LESS code.
Cascade, specificity and why styles fight

When several rules target the same element, specificity decides the winner: inline styles beat ids, ids beat classes, classes beat element selectors, and source order breaks ties. The !important flag overrides this arithmetic — and makes the next override that much harder.

Specificity is scored per selector, not summed from context — a more specific rule wins no matter where in the stylesheet it appears.