GrooCSS

Code CSS in Groovy

Other Features

Pseudo-classes

input % hover { color blue }
li % nthChild('3n') { color blue }

Produces:

input:hover { color: Blue; }
li:nth-child(3n) { color: Blue; }

Extending

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

Produces:

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

Nesting

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

Produces:

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

Keyframes and Transforms DSL

def css = GrooCSS.process(new Config(addWebkit: false, addMoz: false, addOpera: false)) {

        keyframes('bounce') {
            40 % {
                translateY(-30.px)
            }
            60 % {
                translateY(-15.px)
            }
            frame([0,20,50,80,100]) {
                translateY(0)
            }
        }
    }

Produces:

@keyframes bounce {
    40%{transform: translateY(-30px);}
    60%{transform: translateY(-15px);}
    0%, 20%, 50%, 80%, 100%{transform: translateY(0);}
}

Colors

Use the "c", "clr", "rgb" or "rgba" methods to create a color. For example:

def css = GrooCSS.process {
    def sea = c('5512ab') //OR rgb(85, 18, 171)
    _.sea {
        color darken(sea)
        background sea.brighter()
        border "5px solid ${sea.alpha(0.5)}"
    }
}

See the javadoc for all available methods.

You can also use named colors:

_.blue {
    color darkBlue
    background aliceBlue
}

Font-face

fontFace {
    fontFamily 'myFirstFont'
    fontWeight 'normal'
    src 'url(sensational.woff)'
}

Resolves to:

@font-face { font-family: myFirstFont; font-weight: normal; src:url(sensational.woff); }

Custom styles

body {
    add style('-webkit-touch-callout', 'none')
    add style('-webkit-textSize-adjust', 'none')
    add style('-webkit-user-select', 'none')
}

Media

media 'screen', {
    body { width '100%' }
}

Produces:

@media screen {
    body { width: 100%; }
}

Importing

The ability to import other groocss files is supported by importFile, importStream, and importString methods which take a parameter map and input. Any number of variables can be passed. For example:

def otherCss = new File('whatever file.groovy')
importFile otherCss.absoluteFile, linkColor: '#456789', background: 'black'

Within the imported groovy file, linkColor and background will be available with the given values.

More Examples

For more examples, see the code used to create this page's CSS:

  1. stylesheet.css.groovy
  2. style.css.groovy
  3. normalize.css.groovy

Image Methods

Converting from CSS

You can use the Translator to convert existing CSS into GrooCSS syntax:

org.groocss.Translator.convertFromCSS(File inFile, File outFile)

This allows you to get started quickly with GrooCSS in existing projects. See Migrating from CSS for more. Warning: Experimental! (might not always work)

Last updated: 31 July 2019