there are some converters out there helped me to transition from CSS to LESS to SCSS. They mostly offer the opportunity to scan for common properties and create variables from this.

Now I want to go back to Vanilla CSS with Custom Properties. I look for a script or another solution to input a compiled CSS (or the original SCSS/LESS file) and it converts the CSS to a Version that uses custom properties.

So that input.css

body {color: red; background: black;}
body a {color: black; background: green;}

or input.scss

$black = #000;
$red = #f00;
$green = #0f0;
body {color: $red; background: $black;
  a {
    color: $black; background: $green;}
}

would be converted to a output.css

:root {
  --color-black: #000;
  --color-red: #f00;
  --color-green: #0f0;
}

body {
  color: var(--color-red);
  background: var(--color-black);
}
body a {
  color: var(--color-black);
  background: var(--color-green);
}

I found a lot of Converters that do the opposite (e.g. PostCSS for converting Custom Properties to static “CSS3” Style CSS), but not the other way around.

I only found one article that points into this direction: https://codepen.io/jakealbaugh/post/css4-variables-and-sass

And this discussion focuses on a SASS solution: Create CSS custom properties from SCSS variables.

So now I turn to my last resort, CSS tricks. Does anyone out there know a automatic or semi-automatic conversion script?

Nice, thanks for the heads up!

Just one small mistake. The example given for Sass variable and custom property doesn’t work anymore. That used to be correct, but now it should be:
$brandColor: red;
body {
--brandColor: #{$brandColor};
}

More details about this here https://github.com/sass/libsass/issues/2621

:root {
 --tablet: 40em;
}

@media (max-width: --tablet){
 body {
  padding: 0.5rem;
 }
}

That’s not a bug, but probably neccessary to prevent infinite loops, when you would e.g. change the value of –tablet inside the media query.

But you can use SASS variables for media query breakpoints, and since this is still a very common und useful thing, the comparison between SASS and CSS variables probably should mention this.
So this is works fine, since $tablet is replaced with 40em when compiling to css:

$tablet: 40em;


@media (max-width: $tablet){
 body {
  padding: 0.5rem;
 }
}

I would probably add few notes around the use of CSS variables inside :root and the common mistake of evaluating variable there.
Ex:

:root {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}

Then we try to change the --color by adjusting the other variables (ex: .container {--r:255;} which won’t work.
A related SO question: https://stackoverflow.com/a/52015817/8620333 (such question come back quite often)
TL;DR: we should always avoid evaluation inside :root if we aim to change the variable within different elements.

Another note about “cyclic dependencies” would be helpful too since it’s also a common mistake trying to do the following --p:calc(var(--p) + 1px) thinking that we can increment the variable which is invalid.

A last note (not a very important one): Even if we should name them correctly, it’s good to know that they can have some uncommon syntaxes. We can for example use only the two dashes --:red. Not a good practise of course, but good to know. (related: CSS variables can have strange syntaxes )

Great compilation, lots of tips and tricks!
Small suggestion: replace “mousemove” with “pointermove” in the JavaScript-example to also include touch-devices.

.module {
    $backgroundColor: #ff0000;
    --background-color: #{$backgroundColor};
    --background-color-hue: #{hue($backgroundColor)};
    --background-color-saturation: #{saturation($backgroundColor)};
    --background-color-lightness: #{lightness($backgroundColor)};
    --background-color-opacity: #{opacity($backgroundColor)};
    // ...and so on
}

(also, in my experience, you have to explicitly echo sass stuff when you use it in a custom property or it will just treat it like a string)

And then if you want you can just define a list of simple colors as sass variables, but then you can also make variant colors easily. Like your complementary color example: --complement: hsla(calc(var(--background-color-hue) + 180deg), var(--background-color-saturation), var(--background-color-lightness), var(--background-color-opacity));. I’ve got a mixin in my projects that takes a map of colors/property names and breaks them apart like this.

That grid trickery is so interesting tho.

One thing I’d add is that there are some useful features in DevTools nowadays to also help with custom properties.

In Edge and Chrome for example, you can click var() functions to jump directly to where the property used in that function is defined.

All DevTools also provide the computed value as a tooltip on hover.

https://github.com/nuxodin/ie11CustomProperties