Skip to content
A CSS preprocessor using an alternative easy-to-parse syntax
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
sss2.js

README.md

sss2

A CSS preprocessor using an alternative easy-to-parse syntax

Tokens

name    -> [\-_a-zA-Z0-9\.:]+
varName -> @[\-_a-zA-Z0-9]+
string  -> "[^"]+"

Grammar

document        -> (rule|varElement)*
rule            -> selector '{' body '}'
selector        -> '(' selectorPath (',' selectorPath)* ')'
selectorPath    -> (name|selector) ('>'? selectorPath)?
body            -> bodyElement*
bodyElement     -> nestedRule | propertyElement | varElement
nestedRule      -> nestedSelector '{' body '}'
nestedSelector  -> '>'? selector
propertyElement -> name '=' value ';'
varElement      -> varName '=' value ';'
value           -> (string|varName)+

Example

(div > (span,a)) {
  background-color = "red";
  >(img) {
    max-width = "100%";
  }
  (img) {
    max-height = "100%";
  }
}

transforms to

div > span > img,
div > a > img {
  max-width : 100%;
}

div > span img,
div > a img {
  max-height : 100%;
}

div > span,
div > a {
  background-color : red;
}
You can’t perform that action at this time.