3 ms·

> background-color: palette(blue, "light") Having never used Sass, this syntax strikes me as odd. Is there a CSS pre-processor similar to Sass but where you w

> background-color: palette(blue, "light") Having never used Sass, this syntax strikes me as odd. Is there a CSS pre-processor similar to Sass but where you would instead write it as “background-color: palette.blue.light”?

joemaffei 8y ago
Not really a preprocessor per se, but look into JSS. Since it’s just JavaScript, you could use the object syntax you asked about.
intertextuality 8y ago
Why is it odd? You're just calling a function with two arguments.
- albedoa 8y ago
  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.
katsura 8y ago
You can use CSS variables, no preprocessor necessary for newer browsers: :root { --palette-blue-light: blue; } background-color: var(--palette-blue-light);
- cmroanirgo 8y ago
  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 https://caniuse.com/#feat=css-variables [1] https://github.com/aaronbarker/css-variables-polyfill https://github.com/aaronbarker/css-variables-polyfill (or https://github.com/jhildenbiddle/css-vars-ponyfill 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).
Bluestrike2 8y ago
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 http://stylus-lang.com/docs/hashes.html

joemaffei 8y ago

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

intertextuality 8y ago

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

albedoa 8y ago
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.

katsura 8y ago

You can use CSS variables, no preprocessor necessary for newer browsers: :root { --palette-blue-light: blue; } background-color: var(--palette-blue-light);

cmroanirgo 8y ago
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 https://caniuse.com/#feat=css-variables [1] https://github.com/aaronbarker/css-variables-polyfill https://github.com/aaronbarker/css-variables-polyfill (or https://github.com/jhildenbiddle/css-vars-ponyfill 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).

Bluestrike2 8y ago

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 http://stylus-lang.com/docs/hashes.html