What are CSS custom properties

It’s officially called a custom property, but I prefer to call it a variable. Simply put, it’s a CSS property that developers can name and use themselves.

What are the differences between CSS variables and variables in preprocessors?

CSS variables are CSS properties that are directly available in the browser, whereas preprocessing variables are used to compile regular CSS code that the browser doesn’t really know about.

We can use CSS variables directly in stylesheets, inline styles, tags in SVG, and even modify them directly with JavaScript at run time. But we can’t do that with variables in the preprocessor.

Of course, you can use CSS variables and preprocessor variables at the same time, they are not conflicting.

CSS variables: syntax

Declaration of variables

CSS variables are defined with — so that browsers can distinguish between custom and native properties and treat them separately.

If only a custom element and its attribute values are defined, the browser will not react. In the following code, the font color of.foo is determined by color, but –theme-color has no effect on.foo.

.foo {
  color: red;
  --theme-color: gray;
}
Copy the code

We can use CSS custom elements to store any valid CSS property value, for example

.foo {
  --theme-color: blue;
  --spacer-width: 8px;
  --favorite-number: 3;
  --greeting: "Hey, what's up?";
  --reusable-shadow: 0 3px 1px -2px rgba(0.0.0.0.85);
}
Copy the code

Variable names are case sensitive, so –Hello and –Hello are two variables.

Use of variables

The var() function is used to read variables

.button {
  background-color: var(--theme-color);
}
Copy the code

The var() function can also take a second argument that represents the default value of the variable. If the variable does not exist, the default value is used. You can also use another variable as the default.

.button {
  background-color: var(--theme-color,#ffffff);
  background-color: var(--theme-color,var(--theme-textColor));
}
Copy the code

The var() function can also be used to declare variables.

.foo {
  --theme-color: gray;
  --theme-textColor:var(--theme-color)
}
Copy the code

If the variable value is a numeric value, it cannot be used directly with a numeric unit. Instead, use the calc() function to connect them.

.foo {
  --gap: 20;
  / * * / invalid
  margin-top: var(--gap)px;
}

.foo {
  --gap: 20;
  / * * / effectively
  margin-top: calc(var(--gap) * 1px);
}
Copy the code

If the variable value has a unit, it cannot be written as a string.

/ * * / invalid
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/ * * / effectively
.foo {
  --foo: 20px;
  font-size: var(--foo);
}
Copy the code

Scope of a variable

If we want to set –theme-color to a global variable, available everywhere, we use :root pseudo-element

:root {
  --theme-color: gray;
}
Copy the code

The same CSS variable can be declared in multiple selectors. When read, the declaration with the highest priority takes effect. The priority is the same as CSS selectors, such as ID selectors > Class selectors > tag selectors.

In other words, the scope of a variable is the valid scope of its selector.

<style>
  :root{-color: blue; }
  div{-color: green; }
  #box{-color: red; {} *color: var(--color); }
</style>

<p>blue</p>
<div>green</div>
<div id="box">red</div>
Copy the code

CSS custom properties can be used in inline style properties

<! -- HTML --> 
<button style="--color: blue">Click Me</button> 
// CSS 
button { 
    border: 1px solid var(--color); 
} 
button:hover { 
    background-color: var(--color); 
}
Copy the code

Javascript operates on CSS variables

This is where CSS variables are most powerful.

// Set variables
document.body.style.setProperty('--primary'.'#7F583F');

// Read variables
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// Delete variables
document.body.style.removeProperty('--primary');
Copy the code

This means that JavaScript can store arbitrary values into a stylesheet.

const docStyle = document.documentElement.style;
document.addEventListener('mousemove'.(e) = > {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

Copy the code

VUE3 custom attribute use

In VUE3.0, reactive variables can be used in CSS. As you can see from the following figure, it works by using CSS custom attributes

In helloworld.vue, we write the following code, and we use the timer to change the color value after two seconds to see if the view changes

<template>
  <div class="text">Test custom properties</div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive } from 'vue';

export default defineComponent({
  name: ' '.setup() {
    const state = reactive({
      color: 'red'}); onMounted(() = > {
      setTimeout(() = > {
        state.color = 'green';
      }, 2000);
    });
    return{ state, }; }});</script>

<style lang='scss'>
.text {
  color: v-bind("state.color");
}
</style>
Copy the code

You can simply use v-bind in your CSS to bind a responsive variable and refresh the view when the variable changes.

reference

CSS Variables Tutorial