loading...
Cover image for An Easier Way To Write CSS Variables

An Easier Way To Write CSS Variables

shadowtime2000 profile image shadowtime2000 Updated on ・1 min read

Wait What?

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

:root {
    --color: red;
}

.component {
    color: var(--color);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

and it gets converted into this:

:root {
    --color: red;
}

.component {
    color: var(--color);
}
Enter fullscreen mode Exit fullscreen mode

There are some other features so have fun with it!

Discussion

pic
Editor guide