When we use less or sass, we often use local variables and global variables, but we can also define global variables and local variables to simplify our development efficiency when we use CSS, which is very simple and practical.
1. Setting Global variables
Just declare the line in the CSS file referenced by our root, with the following code:
: rout{
--cssname:value
}
This declares a variable named Cssname, the value of which can be called within the scope of the entire Web page, and is called as follows:
. css{
Color:var (--cssname);
}
This completes the call,
2. Setting Local Variables
In fact, the way to set local variables and global variables is roughly the same, the following:
If we need to declare a local variable inside a container with ID box, so that it can be called within the entire box container, we can do the following:
#box {
--cssname:value;
}
This allows us to declare a local variable named Cssname, which is valued value, which is scoped to any child element of the #box container and is called as follows:
#box. child{
Color:var (--cssname)
}
This completes the call that cannot be invoked outside the scope of the action!
is not very simple ah! We can test the actual code, in the specific development is still very useful oh!
CSS setting global variables and local variables
