CSS Custom properties (CSS variables)

preface

Sass /less/ Stylus keeps our CSS code well structured and maintainable.

In recent years, some dynamic features have begun to appear in the CSS language as part of the specification. We call them CSS variables (CSS Custom Properties).

To prepare

Let’s take a look at compatibility before using it:

🙀 wow, has been compatible with 95% or so of the user, it seems that we can almost unscrupulous use, well, next let us go to know about it.

grammar

Css is used in

Add a double slash prefix to the custom property, and then set the value for the custom property as you would for normal CSS.

--primary-color: #000;

In the code above, we give a name called--primary-colorSets a color value for the custom property of# 000.

The attribute has been defined, so let’s try it now, like this:

color: var(--primary-color);

Global CSS variables

:root {
    --primary-color: #000;
}
Copy the code

The complete usage is as follows:

:root { --primary-color: #000; Background-color: var(--primary-color); background-color: var(--primary-color); }Copy the code

Finally, you can add one or more alternate values to your CSS variables:

var(--primary-color, #111);

Calculation of values (calc())

:root {
    --base-height: 10px;
}

margin: 0 0 calc(var(--base-height, 10px) * 1rem);

Copy the code

* note:

• In some browsers, the complex calc() for CSS variables may not work.
• You cannot use CSS custom properties as CSS property names:var(--name): 10px;
• Cannot be used as a media query value:@media screen and (min-width: var(--media-min-width){
• Cannot be used as an image address:url(var(--image-src))

We can reset/inherit variable values at any time

Custom properties in CSS are inherited by default. In this example, you can eliminate the influence of modules/components

:root {
    --bgcolor: #000;
    --color: #111;
}

.reset {
    --bgcolor: #222;
    --color: #333;
    background: var(--bgcolor);
    color: var(--color);
}
Copy the code

Manipulating CSS variables in JavaScript

In your CSS file, say you have a variable called –color in the.div selector with a value of #000:

.div {
    --default-color: #fff;
    --color: #000;
}
Copy the code

// READ
const rootStyles = getComputedStyle(document.documentElement)
const varValue = rootStyles.getPropertyValue('--color').trim()

// WRITE 
document.documentElement.style.setProperty('--color', '#111')
Copy the code

Let’s take a look at some examples:

// GET alert( getComputedStyle(document.documentElement).getPropertyValue('--screen-category').trim(); ) ; // SET document.documentElement.style.setProperty('--color', '# 222') / / or other variables and the default document Settings. The documentElement. Style. SetProperty (' -- color ', 'var (333) - the default - color, #')Copy the code

Check whether the browser supports CSS custom properties:

CSS:

@supports ((--height: 0)) {/* Supports (not (--height: 0)) {/* Supports (supports) */Copy the code

JS:

Supports && window.css. Supports && window.css. Supports ('--height', 0)) {alert(' support '); } else {alert(' not supported '); }Copy the code

advice

• Set the default values when you define variables
• Start working with CSS custom properties and preprocessors using browser-enabled detection