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.
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: redSemicolon-free
You can omit semicolons in SugarSS, simplifying the syntax further and making it cleaner.
.example
background: white
color: blackCompatibility 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' })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 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 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.
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.
Read full docs here.
5.0.0
source.offset (by @RamazanIttiev).FAQs
Indent-based CSS syntax for PostCSS
The npm package sugarss receives a total of 870,909 weekly downloads. As such, sugarss popularity was classified as popular.
We found that sugarss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.