Question

How can I do something like this in CSS:

#red-button {
    .red
}

#green-button {
    .green
}

.red {
    background: red;
}

.green {
    background: green;
}

I have seen this done before but I can’t seem to recall how.

Answer 1

You can use LESS (and other similar solutions there) for that.

LESS extends CSS with dynamic behavior such as variables, mixins,
operations and functions. LESS runs on both the client-side (IE 6+,
Webkit, Firefox) and server-side, with Node.js.

There is also SASS you can use.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested
rules, variables, mixins, selector inheritance, and more. It’s
translated to well-formatted, standard CSS using the command line tool
or a web-framework plugin.