This is the 18th day of my participation in the Genwen Challenge

When we have a lot of CSS code in our project, we usually have a lot of duplicate values. For example, the same color value can be used in hundreds or thousands of places, and if you want to change this value, it is obviously not practical to replace it one by one. This is where variables come in, and thankfully, native CSS already supports them.

Declare CSS variables

A variable is declared by adding two conjunction lines (–) to its name.

body{
    --main-bg-color:#99CCFF;
}
Copy the code

Pay attention to

1) CSS variables are case-sensitive, –main-bg-color and –main-bg-color are different.

2) CSS variables also called CSS custom properties

3) We need a place to put custom properties. While custom properties can be specified in any style rule, it is not a good idea to define properties everywhere, which can be a challenge to the maintainability and readability of CSS.

[:root] The pseudo-class represents the root element of an HTML document, which is a good place to put custom attributes because we can override custom attribute values with other, more specific selectors.

So the above statement would be better changed to:

:root{
    --main-bg-color:#99CCFF;
}
Copy the code

Using CSS variables

Use the var() function to read variables

.box{
    width: 100px;
    height: 100px;
    background: var(--main-bg-color);
}
Copy the code

The var() function can also take a second argument that represents the default value of the variable, which is used if the variable is undeclared.

Pay attention to

1) If the variable value is a numerical value, it cannot be used directly with a numerical unit.

Incorrect use:

Correct use:

Join using the calc() function.

:root{
    --space:20
}
.box{
   margin: calc(var(--space) * 1px);
}
Copy the code

2) If a variable has a unit, it cannot be written as a string.

Incorrect use:

Correct use:

:root{
    --space:20px
}
.box{
   margin:var(--space);
}
Copy the code

Inheritance of CSS variables

Custom attributes are inherited. This means that if no value is set for the custom attribute on a given element, the value on its parent element will be used.

Look at this HTML

<div class="div1">
    div1
    <div class="blue div2">
        div2
        <div class="red div3"> div3</div>
        <div class="div4"> div4</div>
    </div>
</div>
Copy the code

Define variables in two places

.blue {
    --test:#99CCFF;
}
.red {
    --test:#FF3333;
}
Copy the code

Let’s take a look at each in action

1) For class=”div1″, the variable is undefined and the default white is used

2) For class=”div2″, use the variable defined on the element itself, blue

3) for class=”div3″, the variable defined on the element is higher than the parent, use red

4) For class=”div4″, inherit from parent div2, use blue

You cannot set an attribute to an element and then have it get a value from a sibling or descendant rule. Properties are only used to match the current selector and its descendants, just like normal CSS.

CSS variable scope

Take a look at the following HTML code

<div class="box div1" id="first" </div> <div class="box div2" </div> <div class="box div3"> </div Class ="box div4"> </div>Copy the code

Form a complete set of CSS

:root { --bg: blue; }
div { --bg: green; }
#first { --bg: red; }
* { background: var(--bg); }
Copy the code

The effect

In the code above, all three selectors are declared –color variable. Each element reads the variable with the highest precedence, so the color of the three paragraphs is different.

That is, the scope of a variable is the valid scope of its selector.

JavaScript operates on CSS variables

Getting or modifying CSS variables in JavaScript is the same as manipulating normal CSS properties:

/ / get a Dom node CSS variable element. The style.css. GetPropertyValue (" - my - var "); GetComputedStyle (Element).getPropertyValue("--my-var"); / / modify CSS variable element on a Dom node. The style.css. SetProperty (" - my - var, "jsVar + 4);Copy the code

What are the differences between CSS variables and preprocessor variables?

When styling websites, the most common way to make CSS more flexible is to use preprocessors such as Sass and Less. The preprocessor can set variables and use them in functions, loops, math operations, and so on.

Does that mean CSS variables don’t matter?

Not really, mainly because CSS variables are different from preprocessor variables. The difference is that CSS variables are real-time CSS properties that run in the browser, whereas preprocessor variables are ultimately compiled into regular CSS code. Browsers know CSS variables, but not preprocessor variables.

This means that you can update CSS variables in stylesheet documents, inline style properties, and SVG display properties, or choose to manipulate them instantly using JavaScript. But preprocessor variables don’t do that.

If you use a precompiled tool like Less/Sass, which uses variables mostly, and other advanced features that are rarely used, you can just use native CSS variables.

CSS variable

1) dynamic, can be changed at run time 2) easily read and write from JS 3) inheritable, composable, scopedCopy the code

The preprocessor

1) preprocessor variables are not dynamic and cannot be changed at runtime. 2) preprocessor variables are not scoped. 3) They cannot interact with JSCopy the code

Using CSS custom properties A Practical Guide to CSS Variables

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞