Super Style Sheets

SSS is a CSS pre-processor, transpiler or compiler. It extends CSS with a few nice features such as nested rules and variables.

Syntax

Here's what it looks like.

body#home {
  background-color: #fff;

  // Variables
  @pad: 10px;

  .nestedRule {
    padding: @pad;
  }
}

You need:

To install Node modules and compile the parser:

$ npm install
$ make

To compile a SSS file to CSS:

$ bin/sss samples/complete.sss

To run the tests:

$ make test

Or to run the tests on file change:

$ make watch

Here are the files you should take a look at, in logical order:

lib/tokens.jisonlex defines the tokens produced by the lexer.
lib/grammar.jison is the grammar defining the syntax. It is compiled to parser.js.
lib/nodes.js contains the nodes created in the grammar.
lib/context.js represents the current context (scope) during compilation.
bin/sss is the command line interface.

Here are a few ideas to extend this project:

Add options to output compressed or indented CSS.
Implement full CSS selector support: h1 p, h1, h2, h1 > p, [attribute=...], etc.
Add @import support. Loading .sss files from inside a .sss file.
Add support for functions. Eg.: background-color: saturate(#8ef, 20%).
Make ';' optional.

Ping me if you need pointers.

Happy coding!

You are free to modify and distribute this however you want. Except for teaching purposes.