Introducing Variabless - JS & CSS A Match Made in Heaven
Tags: css, javascript, tooling
Published: 2021-08-01 11:36:28

![Variabless logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp9m4f662tvuur47704w.png)

*<center>Thanks goes to [Rubi Deri](https://www.rubideri.com/) for this awesome logo 🎉</center>*
  
We have all been there. We start a new project, create our theme using CSS variabless, and then the worst; We add third-party libraries that expose a JS API to alter their style. What do we do now? How do we share our lovely theme with those libraries?

No worries. We got you covered! Let's see the magic of Variabless:

#One Single Source of Truth
Instead of managing two sets of theme definitions, one in CSS and one in JS, Variabless will convert your Variabless definitions file to CSS variables or properties, allowing you to use those values in JS and CSS files:

![](https://cdn-images-1.medium.com/max/1500/1*JXhMe8jzxQmPWtHA4-UF2g.gif)

*<center>You can try it live in the [Variabless playground](https://ngneat.github.io/variabless/)</center>*

Now we can pass our theme to our 3rd party lib and use it anywhere in our JS code:

{% gist https://gist.github.com/shaharkazaz/4ed23c8fd302faf15d9cfea35b1d7893 %}

Or use it in our CSS files just like any other variable:

{% gist https://gist.github.com/shaharkazaz/23ee04146f2bc62970195bf26271662a %}

#Styles Generator
Variabless allows you to easily create utility classes or any selector you wish referencing the variable’s value. For example, let’s add font-size classes:

![](https://miro.medium.com/max/2000/1*URagIn_Em4Zsld8NnL7t-A.gif)

As easy as it gets 🔥

#Use the Power of JS
Variabless uses a JS config file. It means you can leverage JavaScript to prevent repetitions and keep your config clean 🧼

Let’s take a look at the following configuration. We want to define several font sizes:

{% gist https://gist.github.com/shaharkazaz/b00340ab0ed01bc6cba8ef3cd646b014 %}

Using JS we can easily replace that with a cleaner more scalable option:

{% gist https://gist.github.com/shaharkazaz/413bb7f3ec4978e58a996da556fd1dab %}

***

**Bonus**: since Variabless uses JS and CSS files you get your IDE’s autocompletion 🎉

# Getting Started

## Installation
Install the Variabless package via yarn or npm by running:

```bash
npm i -D @ngneat/variabless
yarn add -D @ngneat/variabless
```

## Usage
There are two ways you can use Variabless via CLI or Webpack plugin.

**The recommended approach is with the Webpack plugin** since it provides you with the ability to add/remove variables during development, while you’re working on the project and see the results as you make the changes.

All you have to do is add the `VariablessWebpackPlugin` to your plugins list:

{% gist https://gist.github.com/shaharkazaz/6fc9a3823b112903c095c4623d2ef267 %}

You can find information on using it via CLI [here](https://github.com/ngneat/variabless#cli).

Include the generated file by Variabless in your styles:

{% gist https://gist.github.com/shaharkazaz/056bf64c528f6af61565ba2161344552 %}

Add the generated file to your `.gitignore` file, there is no need to track it.

*** 

For more information visit the variabless repo, docs and playground:

{% github https://github.com/ngneat/variabless %}

This library was created by myself and @netanelbasal with ❤️