DEV Community

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 (0)

pic
Editor guide