sugarss

SugarSS

Indent-based CSS syntax for PostCSS.

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.

Docs

Read full docs here.

Changelog

5.0.1

• Fixed Invalid mapping errors (by @BaliBalo).

Similar packages

Other packages similar to sugarss

sass

Sass is a mature, stable, and powerful professional grade CSS extension language that is very similar to SugarSS in providing a more simplified and efficient way to write CSS. It offers more features like variables, mixins, and functions which SugarSS does not.

stylus

Stylus is another robust preprocessor that offers a syntax similar to SugarSS with optional braces and semicolons. It provides additional features like variable interpolation and powerful built-in functions, making it more feature-rich compared to SugarSS.

less

Less is a backward-compatible language extension for CSS. Like SugarSS, it simplifies CSS coding but also includes features like variables, mixins, and functions, which are not present in SugarSS.