This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Hello everyone, I am the prosperity of the other shore 🌸, a front-end 👨🏻💻 that firmly believes that hard work can change destiny. If I have the honor to write an article that can get your favor, I am very lucky ~

This series of articles was first published in nuggets

Writing in the front

The use of variables in CSS is not uncommon. In 2007, Sass was introduced to preprocess variables, followed by Less and Stylus preprocessors.

It wasn’t until CSS3 that the concept of variables (also known as custom properties) was introduced, and we’re going to look at that now.

Basic usage

Native CSS defines variables that need to be named with two minus signs — to start, the value can be any valid CSS value. The definition CSS is written in the same way as the normal CSS properties. The grammar rules are as follows:

element {
  --main-text-color: # 333333;
}
Copy the code

Where –main-text-color represents the variable name and #333333 represents the variable value.

That’s why native CSS uses two minus signs — at first, I guess it’s because the @ is occupied by Less and the $is occupied by Sass, so it’s forced to choose –.

Native CSS variables are constrained by the HTML hierarchy and inherit this value from their parent. So the best practice is to define the root pseudo-class: the root selector.

The example code is as follows:

:root{-main-text-color: #FF6A00;
}
Copy the code

Then our HTML structure looks like this:

<h1 class="text">The other shore prosperous</h1>
Copy the code

Now that we have defined the variables and the HTML structure, we use the var() function in the CSS variable to do the following:

.text {
  color: var(--main-text-color);
}
Copy the code

The final effect is as follows:

It is important to note that the case of the custom property is sensitive, i.e. –my-color and –my-color are treated as two variables.

Use of complex values

When we need to use a function as a value, as in this code

background-image: url(./image/avatar.png);
Copy the code

Instead of just defining./image/ avatg.png, you should define the entire value as a variable, as follows:

--avatar: url('./image/avatar.png');
background-image: url(./image/avatar.png);
Copy the code

Inheritance of variables

Native CSS variables are inherited, meaning that we add a variable to a parent that can be accessed by any child.

HTML structure is as follows:

<div class="parent">
  <div class="child">The other shore prosperous</div>
</div>
Copy the code

The CSS code is as follows:

.parent{-color: #FF6A00;
  --font-size: 24px;
  --font-weight: 600;
}

.child {
  color: var(--color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  margin: 32px;
}
Copy the code

The variables we define in.parent can be used in any of the children.

The final result is as follows:

Alternate values of variables

The CSS var() function can take two arguments, the first as its value and the second as its alternate value, which can be used if the first value is invalid.

This function can only take two arguments, the first is the name of the variable and the second is an alternate value, but if there are more than two arguments, the first comma and the following arguments are used as one argument.

The second argument can be nested as follows:

.first {
    /* The current text color is red, because --color is not in the current element, nor in the current parent element */
    color: var(--color, red);
    /* The current text color is --main-text-color, if --main-text-color does not exist, the text color is red */
    color: var(--color, var(--main-text-color, red));
    /* The current text color is red,white, so var() can only use two arguments */
    color: var(--color, red, white);
}
Copy the code

The HTML code is as follows:

<h1 class="first">The other shore prosperous</h1>
Copy the code

Get and set CSS variables through JS

To get and set JavaScript variables through JavaScript,

  1. Gets the specified DOM node

  2. Get the CSSStyleDeclaration object for the current DOM node through the getComputedStyle() method

  3. Through CSSStyleDeclaration. GetPropertyValue (variable name/attribute name) for the specified variable’s value

  4. Through the Element. The style. The setProperty () modify or set the value of a variable

The implementation code is as follows:

/ / 1
const child = document.getElementById('child')
/ / 2, 3
let color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #FF6A00
/ / 4
child.style.setProperty('--color'.'#eeeccc')
color = getComputedStyle(child).getPropertyValue('--color')
console.log(color) // #eeeccc
Copy the code

conclusion

CSS native support variables can help solve some problems, the most important is that CSS is worth reusing, such as colors. There are also problems that cannot be solved by Less or Cass. For example, the font color is obtained from the server, and the font color needs to be set through CSS. In this case, it is impossible to use Less or Sass to solve these problems.

Mastering native CSS variables in conjunction with Less or Sass allows you to achieve some previously unachievable effects during development.

Excellent articles

04- Understand basic data types in JavaScript

03- This time I figured out variables in JavaScript

02-JavaScript lexical structure

01- What is JavaScript