Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 7, 2022 23:59
December 7, 2022 23:59
August 10, 2018 20:46
December 7, 2022 23:59
December 7, 2022 23:59
June 14, 2021 02:03
January 4, 2016 16:15
January 14, 2023 02:23
August 25, 2020 18:50
August 25, 2020 18:50
March 17, 2016 15:08
December 7, 2022 23:59
December 7, 2022 23:59


Indent-based CSS syntax for PostCSS.

  color: blue

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

// Mobile
@media (max-width: 400px)
    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.

Sponsored by Evil Martians


SugarSS MIME-type is text/x-sugarss with .sss file extension.


We recommend 2 spaces indent. However, SugarSS autodetects indent and can be used with tabs or spaces.

But it is prohibited to mix spaces and tabs in SugarSS sources.


SugarSS was designed to have intuitively multiline selectors and declaration values.

There are 3 rules for any types of nodes:

// 1. New line inside brackets will be ignored
@supports ( (display: flex) and
            (display: grid) )

// 2. Comma at the end of the line
@media (max-width: 400px),
       (max-height: 800px)

// 3. Backslash before new line
@media screen and \
       (min-width: 600px)

In a selector you can put a new line anywhere. Just keep same indent for every line of selector:

.parent >
  color: black

In a declaration value you can put a new line anywhere. Just keep a bigger indent for the value:

  background: linear-gradient(rgba(0, 0, 0, 0), black)
              linear-gradient(red, rgba(255, 0, 0, 0))

    linear-gradient(rgba(0, 0, 0, 0), black)
    linear-gradient(red, rgba(255, 0, 0, 0))


SugarSS supports two types of comments:

 Multiline comments

// Inline comments

There is no “silent” comment in SugarSS. Output CSS will contain all comments from .sss source. But you can use postcss-discard-comments for Sass’s silent/loud comments behaviour.

Rule and Declarations

SugarSS separates selectors and declarations by :\s or :\n token.

So you must write a space after the property name: color: black is good, color:black is prohibited.


SugarSS is just a syntax, it change the way how you write CSS, but do not add preprocessor features build-in.

Here are PostCSS plugins which could add you preprocessor features:

Text Editors

We are working on syntax highlight support in text editors.

Right now, you can set Sass or Stylus syntax highlight for .sss files.


SugarSS needs PostCSS compiler. Install postcss-loader for webpack, gulp-postcss for Gulp, postcss-cli for npm scripts. Parcel has build-in support for PostCSS.

Then install SugarSS: npm install --save-dev postcss sugarss if you use npm and yarn add --dev postcss sugarss if you use Yarn.

Then create .postcssrc file:

  "parser": "sugarss",
  "plugins": {
    "postcss-simple-vars": {}


If you doesn’t use Webpack or Parcel, you need some PostCSS plugin to process @import directives.

If you want @import, install postcss-import and add it to .postcssrc file:

  "parser": "sugarss",
  "plugins": {
+   "postcss-import": {},
    "postcss-simple-vars": {}


For mixins support, install postcss-mixins and add it to .postcssrc file:

  "parser": "sugarss",
  "plugins": {
+   "postcss-mixins": {
+     "mixinsDir": "./mixins"
+   },
    "postcss-simple-vars": {}

Now you can define your mixins in mixins/ dir. For example create mixins/circle.sss with:

@define-mixin circle $size
  border-radius: 50%
  width: $size
  height: $size


To define custom functions you need to install postcss-functions and add it to .postcssrc file:

  "parser": "sugarss",
  "plugins": {
+   "postcss-functions": {
+     "glob": "./functions"
+   },
    "postcss-simple-vars": {}

Then you can define functions in functions/ dir. For example, functions/foo.js will define foo() function in CSS:

module.exports = function (args) {
  return 'foo'

SugarSS to SugarSS

Sometimes we use PostCSS not to build CSS, but to fix source files. For example, to sort properties by postcss-sorting.

For this cases use the syntax option, instead of parser:

gulp.task('sort', function () {
    return gulp.src('src/**/*.sss')
        .pipe(postcss([sorting], { syntax: sugarss }))

CSS to SugarSS

You can even compile existing CSS sources to SugarSS syntax. Just use stringifier option instead of parser:

postcss().process(css, { stringifier: sugarss }).then(function (result) {
    result.content // Converted SugarSS content


Cute project logo was made by Maria Keller.