I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.
Lesson Objective for today
According to yesterday’s planning, yesterday I wrote a tag structure of taobao shop template page. Today, it should have realized the page effect, but when I saw CSS variables, I felt very strong, so I wanted to learn. Come on, small and ！！！！
Browser compatibility
Chrome is compatible with CSS variables.
Basic grammar
CSS’s native variable definition syntax is: –*, variable usage syntax is: var(–*), where * denotes our variable name.
CSS variable declarations are less restrictive
For example, CSS selectors cannot start with a number. JS variables cannot be directly numeric. However, in CSS variables, there are no such restrictions.
:root {
1 -: # 369;
}
body {
background-color: var(--1);
}
Copy the codeNote: However, cannot contain $, [, ^, (, %, etc. Common characters are limited to the combination of digits [0-9] ‘ ‘, letters [A-za-z] ‘ ‘, underscore _, and dash -, but can be Chinese, Japanese, or Korean characters, such as:
body {
-- Dark blue: #369;
background-color: var(deep blue);
}
Copy the codeTherefore, we can directly use the Chinese name as a variable, and do not need to use the online translation ~~~~ all the time
Can be named in Chinese? Good magic ~ ~ ~ ~
CSS variablewithCSS selectors
Variables are defined, or declared, similarly to CSS counters.
Take this example:
:root { --color: purple; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
Copy the code<p>My purple is inherited from the root element</p>
<div>My green color comes from direct Settings</div>
<div id='alert'>
The ID selector has a higher weight, so Allah is red!
<p>I am also red, take the inherited light</p>
</div>
Copy the codeVariables also follow CSS selectors. If the selector of a variable does not intersect with the element using the variable, it has no effect.
For example, variables defined by #alert are only available to elements with id alert.
If you want variables to be used globally, you can set them to the :root selector.
When there are multiple variables with the same name, the override rule is determined by the weight of the CSS selector, but there is none! Important is used because it is not necessary. Important is designed to eliminate JS style Settings, but has no such requirement for variable definitions.
CSS variableThe default value
The full syntax for CSS variables is: var([,]?) Var (< custom attribute name > [, < default value]? .
This means that if we are using a variable that is not defined (note, only undefined), we use the following value as the attribute value of the element. Here’s an example:
.box {
1 -: # 369;
}
body {
background-color: var(--1, #cd0000);
}
Copy the codeThe background color is # CD0000
Matters needing attention
Variable declaration location
Both the definition and use of variables can only be in the declaration block {}, for example, the following is not valid:
--Deep blue:# 369;
body {
background-color: var(deep blue);
}
Copy the codeCSS properties ofwithCSS variable
Can CSS property names walk variables?
Something like this:
body {
--bc: background-color;
var(--bc): #369;
}
Copy the codeThe answer is no, if you can support it, then CSS compression can be extremely difficult, estimated that all attributes will become 1 or 2 characters, CSS variables do not support multiple declarations at the same time.
An invalid default feature
Consider the following example:
body {
--color: 20px;
background-color: # 369;
background-color: var(--color, #cd0000);
}
Copy the codeThe background color above will be transparent. For CSS variables, as long as the syntax is correct, even if the value inside the variable is a mess, it will be resolved as a normal declaration, if the value is found to be illegal.
For example, if the background color above clearly cannot be 20px, use the default value of the background color, the default value, instead of ~~~~~~
Thus, CSS is equivalent to:
body {
--color: 20px;
background-color: # 369;
background-color: transparent;
}
Copy the codeIt is important to note that CSS defaults can only be used if a variable is undefined, not if it is illegal.
Space trailing feature
Consider the following example:
body {
--size: 20;
font-size: var(--size)px;
}
Copy the codeFont size:var(–size)px = font size:20 px, note that there is a space after 20, so this uses the default size of the element.
Therefore, don’t try to cancel by using a single number throughout the game, or play it safe:
body {
--size: 20px;
font-size: var(--size);
}
Copy the codeOr use CSS3 calc() to calculate:
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
Copy the codefont size is 20px,
Transfer characteristic
That is, we can introduce other variables directly into the CSS variable definition for our own use, for example:
body {
--green: #4CAF50;
--backgroundColor: var(--green);
}
Copy the codeOr more complex calculations using CSS3 calc(), for example:
body {
--columns: 4;
--margins: calc(24px / var(--columns));
}
Copy the codeFor complex layouts, the pass-through and direct reference nature of CSS variables can simplify our code and implementation costs, especially with dynamic layouts, either reactive CSS or JS-driven layout changes.
As the browser width decreases, and the demo may become 3 of 4 column column, column 2 or even 1 bar, actual development, obviously is not only a column number change, width is small, often means that access to device size is limited, we tend to narrow gap spacing and size size, so that limited screen can display more content.
That is, when we change in response, instead of one CSS property value, we change three or more CSS property values. If we have three response points, do we need at least nine CSS declarations?
However, since we have CSS variables and CSS variables can be passed, we only need to change one CSS property value when we encounter the response point.
Here is the demo core CSS code (only need to change –columns this variable can be) ~~~~~
.box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
border:2px solid # 000;
display: inline-block;
margin: var(--margins);
padding: var(--space);
font-size: var(--fontSize);
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}
Copy the code
Summary of today’s lesson
CSS variables have inheritance, default features for variable validity, trailing whitespace, and internal passing.
Today the mood
Today, I mainly learned the basic CSS variables, and I feel very magical ~~~~. I hope to use ~~~~ for e-commerce page layout tomorrow
This article is formatted using MDNICE