A CSS preprocessor using an alternative easy-to-parse syntax
name -> [\-_a-zA-Z0-9\.:]+
varName -> @[\-_a-zA-Z0-9]+
string -> "[^"]+"
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)+
(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;
}