Pomax / CSSmacros

Start writing CSS with macros ("constants" or "set-once variables"), because sometimes classes and/or just elements doesn't cut it

// -------------------------------------------------------
// Use Macros ("constants" or "set-once variables") in CSS
// -------------------------------------------------------

This JavaScript library lets you use macros in your CSS
files, using the following CSS-accepted syntax:

  @macros {
    macro_1: value_1;
    macro_2: value_2;
    macro_3: value_3;
    macro_4: value_4;
  }

  element {
    some-property: macro_1
  }

  .class {
    some-property: macro_2;
  }

  #id {
    some-property: macro_3;
  }

  *:pseudo-class {
    some-property: macro_4;
  }

Global macros for cross-stylesheet designs
are also supported:

  @global-macros {
    macro_1: value_1;
    macro_2: value_2;
    macro_3: value_3;
    ...
  }

These can be declared in any stylesheet and will
apply to all stylesheets that exist when the
DOMContentLoaded event fires.

Browsers that don't support JavaScript stylesheet
manipulation, as well as browsers that have scripts
disabled, will load CSS files that use macros just
fine, but will ignore any rule that uses a macro
as property value, so things don't break in older
browsers, but you will need to declare fallback
rules (preceding the macro override) for any rule
that should have some specific value when there is no
javascript available (much like how we design modern
web pages already anyway).

Obvious, changing macro values on the fly using
JavaScript is supported. There are new functions
on the DOM (specifically, on the CSSStyleSheet and
StyleSheetList objects) as well as for jQuery.

DOM API:

  document.styleSheets[n].getMacro("some-property");
  document.styleSheets[n].setMacro("some-property","new value");
  document.styleSheets.setMacro("style.css", "some-property","new value");
  document.styleSheets.setMacroForAll("some-property","new value");

jQuery API:

  var value = $('list').macro("some-property");
  var value = $('list[href="style.css"]').macro("some-property");
  $('list').macro("some-property","new value");
  $('list[href="style.css"]').macro("some-property", "new value");

A demonstrator page with a more elaborate explanation
for this project can be found at:

  http://pomax.nihongoresources.com/pages/CSSmacros

// -------------------------------------------

(c) Mike "Pomax" Kamermans

you may use this however you like, including
commercially, although a link to the github
project page would be appreciated.