How to use CSS variables which have multiple properties

Question

I am currently working on a react project which uses DSM inVision for the UI design, basically, DSM provides a CSS file '_style-params' which contains style variables.

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

This usage is easy; I can just import the CSS file into my main CSS file and write:

background-color:var(--color-primary);

However, when it comes to font, I have some questions:

below is from _style-params.css:

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

Am I able to just use following varible (which is a object)

var(--font-button-fonts-default-5-warning)

I dunno which property to use this variable, i tried following:

font:var(--font-button-fonts-default-5-warning)

which is not working (obviously).

So, am I able to use this object CSS variable? Or do I have to use the individual variables?

Did it work when you tried it?

TylerH
– TylerH

2023-02-25 19:19:45 +00:00
Commented Feb 25, 2023 at 19:19 — TylerH
– TylerH, Commented Feb 25, 2023 at 19:19

TylerH · Accepted Answer · 2023-02-25 19:21:33Z

There is no object concept in CSS variables. You need to use them individually but you can also combine them in the same variable that you can use later relying on the shothand notation of properties.

Example:

:root {
/* button fonts/default/5-warning font style */
--button-font-size: 30px;
--button-line-height: 14px;
--button-text-align: center;
--button-color: #f0ad4e;
--button-letter-spacing: 0.2px;
--button-font-style: normal;
--button-font-weight: 400;
--button-font-family: "Roboto";

--button:  
    var(--button-font-style)
    var(--button-font-weight)
    var(--button-font-size)/
    var(--button-line-height)
    var(--button-font-family);
}
.warning {
  font:var(--button);
  color: var(--button-color);
  letter-spacing: var(--button-letter-spacing);
  text-align:var(--button-text-align);
}

<p>text here</p>
<p class="warning">text here</p>

We can use almost all the values inside font but not color, letter-spacing and text-align; you need to use them individually.

Collectives™ on Stack Overflow

How to use CSS variables which have multiple properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related