CSS变量 var的用法是什么？CSS变量 var()的用法详解( 二 ) _CSS变量

如果我们想要创建更复杂的属性值的快捷方式，CSS vars非常适合使用，因此我们不必记住它。CSS属性，如box-shadow，transform和font或其他带有多个参数的CSS规则就是完美的例子。我们可以将属性放在变量中，以便我们可以通过更易读的格式重用它。
例如：
:root {--tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);--animate-right: translateX(20px);}li {box-shadow: var(--tiny-shadow);}li:hover {transform: var(--animate-right);}例4 - 级联变量
标准级联规则也适用于CSS变量。因此，如果多次声明自定义属性，则css文件中最低的定义将覆盖其上方的定义。下面的示例演示了动态操作用户操作的属性是多么容易，同时仍然保持代码清晰简洁。
CSS_var.css文件：
.orange-container {--main-text: 18px;}.orange-container:hover {--main-text: 22px;}.red-container:hover {--main-text: 26px;}.title {font-size: var(--title-text);}.content {font-size: var(--main-text);}.container:hover {--main-text: 18px;}base.css文件：
* {margin: 0;padding: 0;box-sizing: border-box;}html {background: #eee;padding: 30px;font: 500 14px sans-serif;color: #333;line-height: 1.5;}.orange-container {background: orange;}.red-container {background: red;}.red-container,.orange-container {padding-top: 10px;padding-left: 50px;}.container {background: blue;padding: 20px;color: white;}p {transition: 0.4s;}.title {font-weight: bold;}index.html文件：
<html><head><link rel="stylesheet" type="text/css" href=https://www.isolves.com/it/cxkf/yy/CSS2/2021-12-31/"base.css">

Hover orange to make blue bigger.Hover red to make blue even bigger.Hover on the different color areas to change the size of this text and the title.

示例5 - 具有CSS变量的主题切换器
CSS变量的一个好处是它的反应性。一旦我们更新它，任何具有CSS变量值的属性也会更新。因此，只需几行Javascript和CSS变量的智能使用，我们就可以制作一个主题切换器机制。
例如：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>具有CSS变量的主题切换器</title><style>body {background-color: var(--bg, #b3e5fc);color: var(--bg-text, #37474f);font-family: sans-serif;line-height: 1.3;}.toolbar {text-align: center;}</style></head><body><div class="toolbar"><button value=https://www.isolves.com/it/cxkf/yy/CSS2/2021-12-31/"dark">dark

I would like to use an external javascript file in another javascript file. For example, I could store all my global variablesin a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.How do I use the globals.js inside the logic.js?