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!

Back | DEV.to

shadowtime2000

If you are looking at this you probably wonder who I am; teenage open source maintainer

shadowtime2000's DEV profile image