I am small white, if there is a problem, but also hope to point out, humbly seek advice.

CSS Advanced – Use of variables

In fact, CSS also supports custom variables, also called custom variables or cascading variables, without using LESS or SASS. Custom property symbols are usually used (for example –main-color: black;) To set them and use the var() function (for example) to access them, color: var(–main-color);

Browser compatibility

Unfortunately, IE is not supported across the board.

The basic use

define

  1. usingDouble hyphen (--)Declare a custom property with a custom property name at the beginning and a property value that can be any valid CSS value.
element {
  --main-bg-color: brown;
}
Copy the code
  1. in:rootDefine custom attributes on pseudo classes so that they can be used in your HTML documentsglobalApply it. However, this is not always the case: there may be good reasons to limit the scope of custom attributes.
:root{-main-bg-color: brown;
}
Copy the code

use

You can use custom property values by specifying custom property names inside the var() function instead of regular property values:

element {
  background-color: var(--main-bg-color);
}
Copy the code

Example:

:root{-main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}
Copy the code

Note: Custom attribute names are case sensitive, –my-color will be treated as a separate custom attribute –my-color.

Custom property inheritance

If no value is set for the custom property on a given element, the value of the parent is used (inheriting the custom property value of the parent).

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
Copy the code
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}
Copy the code

In this case, the result is var(–test) :

  • For the class=”two” element: 10px
  • For class=”three” elements: 2em
  • For the class=”four” element :(10px inherited from its parent)
  • For class=”one” elements: invalid value, which is the default value for any custom attribute

Keep in mind that these are custom properties, not actual variables that you might find in other programming languages. This value is computed where needed and is not stored for other rules. For example, you can’t set attributes for an element and expect it to be retrieved according to a sibling’s descendant rule. Like any normal CSS, only the matched selector and its descendants are set to properties.

Custom attribute fallback values

Using the var() function, you can define multiple fallback values without defining a given variable

Fallback values are not used for fixed browser compatibility. If the browser does not support CSS custom properties, the backup values will not help. It is simply a backup of browsers that support CSS custom properties, and if a given variable is undefined or has invalid values, you can choose another value.

The first argument to this function is the name of the custom property to be replaced. The second argument to this function, if provided, is a fallback value that will be used as a replacement value if the referenced custom property is invalid. The function takes only two arguments, assigning everything after the first comma to the second argument. If the second argument is invalid (for example, a comma-separated list is provided), the fallback fails.

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}
Copy the code

As shown in the second example above, including a custom property as a fallback is the correct way to provide multiple fallbacks. This technique has been found to cause performance problems because it takes more time to parse variables.

The validity of custom attributes

The classic CSS validity concepts associated with each property are not very useful for customizing properties. When parsing the values of custom attributes, the browser does not know where they will be used, so it must consider that almost all values are valid.

Unfortunately, these valid values can be used in contexts that may not make sense through the var() function notation. Properties and custom variables can result in invalid CSS statements, leading to new concepts that are valid at compute time.

Invalid attribute

When the browser encounters an invalid var() substitution, it will use the original value of the property or the inherited value.

:root { --text-color: 16px; }
p { color: blue; }
p { color: var(--text-color); }
Copy the code

As expected, the browser substitute values –text-color where var(–text-color), but 16px is not a valid attribute value color. After substitution, this property has no meaning. Browsers handle this situation in two steps:

  • Checking property colorsInheritable. Yes, but <p> does not have any parent object with the color attribute. So, move on.
  • Set the value toDefault initial valueBlack.

The values in the JavaScript

Use the values of custom properties in JavaScript, just like standard properties.

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", jsVar + 4);
Copy the code

reference

Developer.mozilla.org/en-US/docs/… Juejin. Cn/post / 684490…