Experiments >

Extract a CSS var with VIM

Experiment #246th March, 2021by Joshua Nussbaum

To make a site responsive, CSS rules are often turned into variables.

Today I explored creating a plugin to make that a bit easier.

How it works:

Place your cursor on any css and invoke the plugin, and it will turn the current line into a CSS var.

/* before */
color: red

/* after */
color: var(--color)

The definition for the var --color: red is placed in your copy & paste register so you can paste it near your other vars.

Here’s the code:


Here’s what it looks like:

view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow