Pollen is built on CSS variables, a new web specification that allows us to define custom CSS properties that can be used anywhere in your project. Since they are defined globally and represent a single source of truth, variables allow us to do things not previously possible in CSS.
Pollen’s CSS variables can be changed inside media queries, to update their value across a project. Redefine a variable on :root
in a media query. All instances of that variable will then update when the media query is triggered.
@media (min-width: 45em) {:root {--body-font-size: var(--scale-1);}}
CSS variables are also accessible in JavaScript, which allows you to accomplish things that were previously very complicated, like dynamically applying style themes. By updating a few key variables based on user input, you can reskin an entire interface.
Update CSS variables in JS by using the setProperty
method on the document root’s style property.
document.documentElement.style.setProperty(`--font-family-sans`,`'Garamond', serif`);
You can also alias variables to other variables, this is useful for using a consistent property throughout your codebase that can be dynamically updated without losing meaning
document.documentElement.style.setProperty(`--color-primary`,`var(--color-blue)`);