User-defined keywords in CSS A look back at my hopes before Sass

Today I came across some notes I made 5 years ago in March of 2007.

In my dream world, CSS2.2 would allow you to define your own keywords like this:

  @keyword -vendor-meaningfulName value;

The keyword would use the same form as Vendor-specific extensions
(http://www.w3.org/TR/CSS21/syndata.html#q4), but (for security reasons) could
not override Vendor-specific extensions. If defined inside a block, the keyword
would have block scope; otherwise it would have global scope for the current web
page. You could @import a css file full of @keyword definitions.

Example:

  @keyword -color-body-background       #ffffff;
  @keyword -mysite-default-border       1px solid black;
  @keyword _mynamespace-article-font    Georgia, "Times New Roman", serif;

  body  { background-color: -color-body-background; }
  div   { border: -mysite-default-border; }
  p     { font: bold italic 1.5em _mynamespace-article-font; }

Even before CSS3 was available in browsers, I was already lamenting the lack of proper abstraction in CSS. The stupid amount of copy and pasting that is necessary to re-use styling on a website was, and continues to be, painful.

The @keyword syntax I came up with is interesting since it re-uses CSS2’s vendor prefix. In essence, it allows CSS authors to become their own vendor. This is a pretty powerful idea. However, the @keyword syntax is most similar to a programming language’s constants feature; for example, the PHP equivalent would be define( -mysite-default-border, "1px solid black");.

But, let’s compare this to Sass. Sass’ $variables can be manipulated like normal programming languages variables can; you can add them, compare them, etc. Which means Sass variables are much more powerful and flexible.

I’m really glad I live in a world with Sass.