$ 符号 被 Sass 占用
@ 符号 被 less 占用
因此CSS中采用了 --
JS:
可以看到var只是个声明变量的关键字，color才是变量名。
PHP:
Scss:
CSS在使用变量的时候用到了一个函数叫var()：
CSS:
创建个支持vue3的vite项目
进入到该文件夹
安装依赖
创建一个组件
使用中文引入变量
参考：
Vue 超好玩的新特性：在 CSS 中使用 JS 变量
方法一：使用原生js操作dom的方法，来改变css的样式，比如
document.getElementById(id).style.property =newstyle
这里的new style 里面就可以使用js传入的变量。
此方法固然可以，但是对应改变一些复杂的css，比如动画什么的，操作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！
方法二：
利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！
首先一个原则是css中不应该与JS发生交互,这是设计的一个基本原则.
css的作用是控制样式,js控制逻辑,两者的职能最好划分开.
如果你非要在css中使用js,那么ie还是能够成全你的,比如
background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )这种写法ie是认识的.不过作为一个负责人的程序员,不建议你这么用.后期维护,跨浏览器兼容性,等一些列问题会让大家都头大的.
相关细节请自己查一下expression+ie
