CSS (--var) to (.class)

Generate classes from css Variables!

• Client Side Classes Generation
• Reduce css File Size
  

no need to type class, background-color again- -and- -again- -and- -again- -and- -again!

Usage

css

.background-color
{
    --red: red;
    --blue: #4169E1;
}

html

<div class="red">  I am red  </div>
<div class="blue"> I am blue </div>

css

.border-radius
{
    --rounded: 100px;
    --curved: 5px;
}

html

<div class="rounded red"> I am rounded red </div>
<div class="curved blue"> I am curved blue </div>

How it works?

Structure

.[property]
{
    --[class_name]: [value];
}

Conversion

from

.background-color
{
    --myred: rgb(255, 0, 0);
}

to

:root
{
    --myred: rgb(255, 0 0);
}

.myred
{
    background-color : var(--myred);
}

Getting Started

Add color anywhere inside <link .. color .. >

<link color rel="stylesheet" href="myColors.css">

Download and add javascript anywhere after <link> in html

<script src="css--var2class.js"></script>