CSS Formatter 2024

Visit Website

CSS Formatter is a free, in-browser tool that converts CSS into clean, idiomatic, correctly nested SCSS. It runs entirely on your machine, so nothing is uploaded.

CSS Formatter started as a personal tool. When I inherited projects built by others, the CSS was often unstructured and impossible to categorize. Converting it to SCSS let me group related rules and make the code readable again. It is now public at cssformatter.ir for anyone who needs the same cleanup.

Features

• Instant Transmutation - Paste your CSS, click Transmute, and get SCSS back. The converter re-nests selectors using SCSS & parent references, keeping selectors, nesting, and variables intact.
• Private by Design - Your styles never leave the browser. Conversion runs locally with zero server round-trips, so nothing is uploaded.
• Copy or Download - Grab the result in one click, or save a ready-to-use .scss file. The output is syntax-highlighted with Prism.

How it converts

The converter goes beyond a simple formatter. It rewrites your CSS into idiomatic SCSS:

• Re-nests selectors using SCSS & parent references.
• Keeps grouped selectors together, so html, body, div { ... } stays a single rule.
• Consolidates rules that share an ancestor into one nested block, following the original selector hierarchy. For example, blockquote p:before becomes:

blockquote {
  p {
    &:before {
      content: open-quote;
    }
  }
}

• Emits &:hover, &.class, &[attr], & > child, & + sibling, and & ~ sibling for pseudo-classes, combinators, and compound selectors.
• Nests conditional at-rules inside the selector they modify. When every rule inside an @media, @supports, or @container targets the same host selector, the query moves inside it (e.g. .card { @media (...) { ... } }). Sass bubbles it back out on compile, so the output is just as valid CSS, only cleaner SCSS. Queries that target several selectors stay as flat top-level blocks.
• Keeps true top-level at-rules as blocks: @keyframes, @font-face, :root, ::selection, and so on. Priority rules (:root, ::selection, ::-moz-selection, @font-face) are lifted to the start of the output, and @keyframes blocks move to the very end.
• Fixes modern hsl() and rgb() color syntax so older engines accept it.

The output recompiles to CSS that is semantically identical to the input.

Extra actions

Beyond converting, the editor supports a few more actions:

• Upload a .css file instead of pasting.
• Beautify messy CSS to normalize it before converting.
• Syntax-highlighted SCSS output via Prism.

Why SCSS, not native CSS nesting

The CSS nesting module now supports nesting, but it has limits.

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor. CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

CSS nesting - MDN

The CSS Formatter supports several key CSS features for conversion, including @media queries, @import, @page, @font-face, @supports, @container, and @keyframes.