[CSS extension] How does VUE use or modify the CSS global variables that come with element plus to define styles

Table of contents

2. Use the built-in styles of el plus and el ui

3. Modify the custom style variables in el plus and el ui (the method is the same)

Ben Mengxin recently used the CSS global style definition that comes with element plus when writing web pages. This article will start from the method of declaring global variables in CSS, and record how to use and customize element plus (vue3) and element ui (vue 2 ) comes with styles. It also includes some preliminary explorations of the SCSS language. Please give me your advice~

1. CSS declares global variables

When we are writing CSS, we will encounter the same attribute value repeatedly defining the same attribute of some elements, the code repetition is high, and it will be cumbersome to modify the attribute value uniformly. Therefore, we also provide a method in CSS, so that we can uniformly store the value in a variable and then call it like other language types.

Then here we will introduce : root and var() two "King Kong". This is the most basic and commonly used combination.

:root matches the root element in the document tree in the form of a pseudo-class. Generally speaking, :root corresponds to the HTML element, but it will have a higher priority than the HTML element selector. It is not difficult to understand that HTML is the "father" of our other elements, and all CSS global variables should be declared in :root.
The meaning of the var() function is to obtain the value in the custom attribute and insert it into the corresponding attribute of the style sheet we wrote.

Give me a chestnut~

:root{
    --button-color:#fff;
    --div-margin-left:10px;
}

div{
    margin-left:var(--div-margin-left);
}

button{
    background-color:var(--button-color);
}

*Note: Custom attribute variables should be with -- (double dashes) at the beginning , as a distinction from other attribute names, in line with CSS specifications

2. Use the built-in styles of el plus and el ui

So how do we use some ready-made variables in the element library? Take color as an example~

First of all, we need to find where are the files defining global variables in element plus and element ui, so as to facilitate reference and custom modification.

1. element plus—— var.scss position

Under \node_modules\element-plus\theme-chalk\src\common folder

2. element ui—— var.scss location

Under \node_modules\element-ui\packages\theme-chalk\src\common folder

Next, take element plus as an example to briefly see how var.scss is defined:

The definition of the color part in the file is intercepted, as shown in the figure below:

!default represents the default value of the variable
map.deep-merge($map1, $map2) Merge the attributes and attribute values of the two variable declarations together, here is the color value map corresponding to each state (success, warning, etc.) defined in $type and The maps of the original color are merged
Then define the specific color style on the basis of color, there will be $color-white $color-primary and so on
The map.get($map, key) method is used to obtain the corresponding attribute value in the map according to the key value like an object. The above picture is to use the key value of 'white' 'black' to get the color value corresponding to 'white' 'black' in the previous $colors.

After understanding how it is defined, let's use the defined ones in our own styles~

We introduce element-plus globally in main.js (the method will not be described in detail), and then import it in our own vue interface. The import format is as follows:

//随便写的例子，重点关注后面两行
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}

*Note: We found the corresponding variable name such as $color-primary, but it needs to be added --el- when used in vue, that is, --el-color-primary will finally take effect

3. Modify the custom style variables in el plus and el ui (the method is the same)

The official website tutorial is as follows:

element-plus: theme | Element Plus (element-plus.org)

element-ui: component | Element

In summary, there are three steps:

Create a custom element-variables.scss file in the assets (static resources) directory, and introduce it in main.js

Find the location of var.scss according to the path introduced in the second point, check which variables are defined in the library, which ones can be modified, how the code is, etc., and modify the content based on the original variables.
Then, first import the original var.scss code in the custom scss file, using the statement:

Above the line of code , write the variable content defined and modified by yourself! ! !

Hope it helps you~~~