An Easier Way To Write CSS Variables

Wait What?

I think you should be familiar with CSS Variables, which can be used like this:

:root {
    --color: red;
}

.component {
    color: var(--color);
}

These can be manipulated at runtime, though they seem a little hard to write. What if I told you there is an easier better way?

SwordCSS

SwordCSS is a CSS preprocessor I have been working on in my free time. It allows you to write CSS Variables like this:

@sw-variables {
    color: red;
}

.component {
    color: color;
}

and it gets converted into this:

:root {
    --color: red;
}

.component {
    color: var(--color);
}

There are some other features so have fun with it!