CSS Object to Valid CSS String

yugal.style can be used to convert CSS Object to a Valid CSS String, for example

a = {
    fontSize: 20,
    color: "#000",
    backgroundColor: "#ededed"
}

Above code is a JavaScript object, which is not a valid CSS Code. This needs to be converted to browser understandable code. Which is done by yugal.style method.

Run yugal.style with above code like

a = yugal.style(a); //a is already defined above

Above code will result an output into a as string value which is following

'font-size:20px;color:#000;background-color:#ededed;'

Now this string can be used as inline-style or in defining CSS blocks too.

For example:

const NavBar = `
    <header style="${a}">
        <nav>
            <button>ABC</button>
            <button>ABC</button>
        </nav>
    </header>
`

In above you can see, in line 2 style created above is used as inline style in header tag.

Last updated

Was this helpful?