# sugarss

> Indent-based CSS syntax for PostCSS

Latest version **5.0.1** (published 2025-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install sugarss
pnpm add sugarss
yarn add sugarss
bun add sugarss
```

## Health

**Score 40/100 (D)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.0.1 |
| Published | 2025-07-30 |
| First published | 2016-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18.0 |
| Dependencies | 0 |
| Unpacked size | 94.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 717 |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | css, postcss, postcss-syntax, syntax, indent, parser |

## Links

- npm: https://www.npmjs.com/package/sugarss
- Repository: https://github.com/postcss/sugarss
- Homepage: https://github.com/postcss/sugarss#readme
- Issues: https://github.com/postcss/sugarss/issues
- Funding: https://opencollective.com/postcss/
- npm.io page: https://npm.io/package/sugarss

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 5.0.1 (latest) — 2025-07-30
- 5.0.0 — 2024-11-20
- 4.0.1 — 2021-06-14
- 4.0.0 — 2021-06-14
- 3.0.3 — 2020-11-05
- 3.0.2 — 2020-11-05
- 3.0.1 — 2020-09-27
- 3.0.0 — 2020-09-15
- 2.0.0 — 2018-08-11
- 1.0.1 — 2017-11-05
- 1.0.0 — 2017-05-07
- 0.2.0 — 2016-10-07
- 0.1.6 — 2016-09-08
- 0.1.5 — 2016-07-23
- 0.1.4 — 2016-05-30
- … 5 more at https://npm.io/package/sugarss/versions

## README

# SugarSS

<img align="right" width="120" height="155"
     title="SugarSS logo by Maria Keller"
     src="http://postcss.github.io/sugarss/logo.svg">

Indent-based CSS syntax for [PostCSS].

```sass
a
  color: blue

.multiline,
.selector
  box-shadow: 1px 0 9px rgba(0, 0, 0, .4),
              1px 0 3px rgba(0, 0, 0, .6)

// Mobile
@media (max-width: 400px)
  .body
    padding: 0 10px
```

As any PostCSS custom syntax, SugarSS has source map, [stylelint]
and [postcss-sorting] support out-of-box.

It was designed to be used with [postcss-simple-vars] and [postcss-nested].
But you can use it with any PostCSS plugins
or use it without any PostCSS plugins.
With [postcss-mixins] you can use `@mixin` syntax as in Sass.

<a href="https://evilmartians.com/?utm_source=sugarss">
  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
       alt="Sponsored by Evil Martians" width="236" height="54">
</a>

[postcss-mixins]:              https://github.com/postcss/postcss-mixins
[postcss-nested]:              https://github.com/postcss/postcss-nested
[postcss-simple-vars]:         https://github.com/postcss/postcss-simple-vars
[postcss-sorting]:             https://github.com/hudochenkov/postcss-sorting
[stylelint]:                   http://stylelint.io/
[PostCSS]:                     https://github.com/postcss/postcss


## Docs
Read full docs **[here](https://github.com/postcss/sugarss#readme)**.

---
_Source: https://npm.io/package/sugarss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._