You can use CSS variables, no preprocessor necessary for newer browsers:

  :root {
    --palette-blue-light: blue;
  }
  background-color: var(--palette-blue-light);

Great suggestion, but due to extremely poor support [0], it might be best to use a polyfill [1]

[0] https://caniuse.com/#feat=css-variables [1] https://github.com/aaronbarker/css-variables-polyfill (or https://github.com/jhildenbiddle/css-vars-ponyfill)

Personally, I don't like forcing JS to make things render properly on the client, but it depends on the project whether it's acceptable or not.

However, it kind of defeats the purpose, because if you're willing to use a polyfill, then you may as well use sass or less as a solution anyway (and get a range of benefits that they provide).

I haven't used it in a number of years, but Stylus apparently lets you access hashes[0] using dots:

  palette = {
    blue: {
      light: hsl(201, 75%, 56%)
      base: hsl(201, 75%, 51%)
      dark: hsl(201, 75%, 46%)
    }
  }
  
  palette.blue.light
  // => hsl(201, 75%, 56%)

It was a fun preprocessor, even if you could go overboard with it (for instance, dropping colons). I used it in a few node projects, but didn't do much beyond that because it never really took off like Sass. Sass is, well, everywhere. Stylus, on the other hand, appears to be either dead or close enough to it. While I've got a list of issues with Sass--mainly because I prefer the SASS syntax over SCSS--none of them are dealbreakers.

0. http://stylus-lang.com/docs/hashes.html

Why is it odd? You're just calling a function with two arguments.

That function call is an alias for: map-get(map-get($palettes, 'blue'), light)

Which, in a language with dot accessors, could be accessed like: $palette.blue.light

I don't think he means that the function call is odd but rather that it's odd that you have to create and call a function to be as concise. Some of the oldest and longest Sass issue threads are about this missing feature.

Not really a preprocessor per se, but look into JSS. Since it’s just JavaScript, you could use the object syntax you asked about.