sugarss

What is sugarss?

SugarSS is a syntax parser for PostCSS that allows you to write your CSS in a more minimalistic and readable format, similar to Sass or Stylus. It simplifies the CSS syntax by removing braces, semicolons, and enabling indentation-based scoping.

What are sugarss's main functionalities?

Indentation-based Syntax

SugarSS allows you to write CSS rules using indentation instead of braces, making the CSS more readable and concise.

.one
  color: blue
  .two
    color: red

Semicolon-free

You can omit semicolons in SugarSS, simplifying the syntax further and making it cleaner.

.example
  background: white
  color: black

Compatibility with PostCSS

SugarSS is compatible with PostCSS, allowing you to use it alongside a wide range of PostCSS plugins for added functionality.

postcss([ require('sugarss') ]).process(css, { parser: 'sugarss' })

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.

README

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.0

• Added source.offset (by @RamazanIttiev).
• Removed Node.js 16 support.