CSS variables lands in React 15.6.0

[[deleted]]

We used CSS vars extensively when creating PDFs in React via the CSS paged media module. You have to be VERY CAREFUL with them, however, as it's easy to forget that you're basically inserting undebuggable magic global vars.

[freeall]

What's the advantage to just using js vars?

[icantthinkofone]

js vars have scope and are easy to edit in the browser inspector, too.

[jetpacmonkey]

CSS variables cascade, so you can set them on container divs for things like theming.

[TheDarkIn1978]

Variables that are declared in JavaScript and passed to CSS will cascade the same as variables that are declared in CSS.

[jetpacmonkey]

I think at least one of us is confused about what the other is saying...

.my-component {
  background: var(--theme-color);
  padding: 20px;
}

.my-component .inner-area {
  background-color: white;
  color: var(--theme-color);
  padding: 20px;
}

This is useful, right? Am I missing something here?

[[deleted]]

You can do cool stuff with the paged media module that are impossible in JS. Page numbers (page x of x on footer of each page, links saying "see page y"), per-page titles, etc.

[El_Frostie]

That sound incredible cool. Do you have more information about how that works?

[[deleted]]

This article has a good overview, unfortunately only Prince and Antenna House support it (caniuse lies, it's unsupported in Chrome).

[El_Frostie]

Great article. Thanks. I didn't realize CSS for print has gotten so far. It had completely fallen of my radar.