GrooCSS - Extending and Nesting

Extending

    _.warn { color red }
    _.error {
        extend(_.warn) // extend '.warn' also works
        background black
    }

Produces:

    .warn,.error {color: Red;}
    .error {background: Black;}

Nesting allows you to define modifications to a style (such as pseudo-classes additions to a selector) within the same block. For example:

a {
    color '#000'
    add ':hover', { color blue }
}
div {
    add '> p', { color '#eee' }
}

Produces:

a { color: #000; }
a:hover { color: Blue; }
div > p { color: #eee; }

Last updated: 31 July 2019