# CSS Formatter

Pretty-print CSS, SCSS, or LESS locally. Choose indentation, sort declarations, split selectors, and normalize hex colors in your browser.

## Run it

- **CLI:** `gizza tool format-css ".btn{color:#abcdef;margin:0;&:hover{color:red}}"`
- **Web:** https://gizza.ai/tools/format-css/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/format-css/tool.json

## Inputs

- `input` — CSS / SCSS / LESS _(field)_
- `indent` — Indent width (spaces per level) _(field)_
- `indent_char` — Indent character _(field)_
- `sort` — Sort declarations _(field)_
- `selectors_per_line` — One selector per line _(field)_
- `uppercase_hex` — Uppercase hex colors _(field)_

## Output

- Formatted CSS (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `input` — CSS / SCSS / LESS
- `indent` — Indent width (spaces per level)
- `indent_char` — Indent character
- `sort` — Sort declarations
- `selectors_per_line` — One selector per line
- `uppercase_hex` — Uppercase hex colors

Example: `https://gizza.ai/tools/format-css/?input=.btn%7Bcolor%3A%23abcdef%3Bmargin%3A0%3B%26%3Ahover%7Bcolor%3Ared%7D%7D&indent=2&indent_char=space&sort=none&selectors_per_line=true&uppercase_hex=true`

---

## About this tool

**CSS Formatter** pretty-prints (beautifies) minified or messy **CSS, SCSS, and LESS**. It puts
one declaration per line, normalizes `prop: value` spacing, indents nested rules, and preserves
your comments — all in your browser. Nothing is uploaded.

Beyond plain re-indenting it can, optionally:

- **Sort declarations** within each rule — alphabetically (A–Z) or by a concentric *grouped* order
  (custom properties → positioning → box model → border → background/color → typography → visual
  effects → interaction).
- **Split comma selectors** onto their own lines (`h1, h2` → `h1,` / `h2`).
- **Uppercase hex colors** (`#abcdef` → `#ABCDEF`).

It understands SCSS/LESS **nesting** (`&:hover`, `@media { … }`, `@mixin`/`@include`), `$`/`@`
variables, and `//` line comments — while leaving `url(http://…)` and quoted strings untouched.

### Example

Input:

```css
.btn{color:#abcdef;margin:0;&:hover{color:red}}
```

Output (defaults — 2-space indent, source order):

```css
.btn {
  color: #abcdef;
  margin: 0;
  &:hover {
    color: red;
  }
}
```

### Limits

- **Whitespace, casing, and order only** — values are never rewritten. It will not drop zero units,
  shorten `#ffffff` to `#fff`, collapse shorthands, or minify (that's a different, lossy operation —
  use a CSS minifier for that).
- Sorting reorders declarations, which can change the cascade for duplicate properties in the same
  rule — leave sort on **Keep source order** if a rule relies on later-wins duplicates.
- It's a forgiving formatter, not a validator: badly broken CSS is reindented as best it can, not
  rejected.

## FAQ

<details>
<summary>Does it work with SCSS and LESS, not just plain CSS?</summary>

Yes. Nested rules, the `&` parent selector, block at-rules like `@media`/`@mixin`, `@include`
statements, `$foo`/`@foo` variables, and `//` line comments are all handled. Plain CSS is just the
case with no nesting.

</details>

<details>
<summary>What does "grouped" sorting order look like?</summary>

Grouped (a.k.a. concentric or idiomatic) order lists custom properties first, then positioning,
then the box model, borders, background/color, typography, visual effects, and interaction. Any
property not in the built-in table falls back to alphabetical after the known ones, so the result is
always deterministic.

</details>

<details>
<summary>Will it change my colors or values?</summary>

No — formatting is lossless. The only value-level change is optional: turning on **Uppercase hex
colors** rewrites `#abcdef` to `#ABCDEF`. It never shortens hex, drops units, collapses shorthands,
or otherwise rewrites values.

</details>

<details>
<summary>Is my CSS uploaded anywhere?</summary>

No. The formatter runs entirely in your browser via WebAssembly — the CSS you paste never leaves
your machine.

</details>

<details>
<summary>Can it minify CSS?</summary>

No, this tool only beautifies (expands) CSS. Minification is the opposite, lossy transform — reach
for a dedicated CSS minifier if you want to shrink output.

</details>

## Related tools

- [Code Formatter](https://gizza.ai/tools/code-formatter/): Beautify and re-indent minified or messy HTML, CSS, JavaScript, or JSON. Auto-detect the language, choose spaces or tabs, and format locally in your browser.
- [Adjacency Matrix Converter](https://gizza.ai/tools/adjacency-matrix-converter/): Convert a graph between edge list, adjacency matrix, and incidence matrix — directed or undirected, weighted or not. Free, private, runs in your browser.
- [Amazon Order Analyzer](https://gizza.ai/tools/amazon-order-analyzer/): Paste an Amazon order-history CSV export to summarize total spend by month, top items, and category breakdowns. Browser-only, private, with Markdown or JSON output.
- [Avro to JSON Converter](https://gizza.ai/tools/avro-to-json/): Decode Apache Avro Object Container Files (.avro / OCF) to JSON, NDJSON, or the embedded schema — no .avsc needed, free and private in your browser.
- [Reconcile bank statement and ledger CSVs](https://gizza.ai/tools/bank-statement-reconcile/): Match bank-statement CSV rows to ledger rows by date, signed amount, and fuzzy memo similarity, with unmatched and suggested matches.