DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for An Easier Way To Write CSS Variables
shadowtime2000
shadowtime2000

Posted on • Updated on

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);
}
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!

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.