Skip to main content

CSS Variable

CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries. - W3School

Working with CSS Variable​

In tenoxui, there's several ways to deal with CSS variable. Here's the examples :

1. CSS File and Element Class Name​

In this exampls, you need to add some variables inside of CSS file. Example :

index.css
:root {
  --primary: #ccf654;
  --red-400: #f65454;
}

Now, you can access the value inside of element classname using $, like this :

index.html
<h1 class="tc-$primary">Hello World!</h1>

Note: tc is type for color property!

2. Custom CSS Variable Class Name​

You can also add custom variable directly inside your element class name, like this :

index.html
<h1 class="[--primary]-blue tc-$primary">Hello World!</h1>

Instead of using CSS variables from CSS file, it will add --primary variable to the element.

3. Custom Type and Property​

You can also add custom for the type and property. Instead of adding CSS property, you can add CSS variables instead. Example :

use({ property: [{
  tc: "color",
  "my-color": "--my-color",
}]});

then, you can use it like this :

index.html
<h1 class="my-color-blue tc-$my-color">Hello World!</h1>

More​

All ways to access CSS variables :

type-$variable-name // this is valid
type-[--variable-name] // this too
type-[var(--variable-name)] // this is also valid