Vue3中CSS使用JS变量

html-css012

Vue3中CSS使用JS变量,第1张

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

JS:

可以看到var只是个声明变量的关键字,color才是变量名。

PHP:

Scss:

CSS在使用变量的时候用到了一个函数叫var():

CSS:

创建个支持vue3的vite项目

进入到该文件夹

安装依赖

创建一个组件

使用中文引入变量

参考:

Vue 超好玩的新特性:在 CSS 中使用 JS 变量

首先一个原则是css中不应该与JS发生交互,这是设计的一个基本原则.

css的作用是控制样式,js控制逻辑,两者的职能最好划分开.

如果你非要在css中使用js,那么ie还是能够成全你的,比如

background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

这种写法ie是认识的.不过作为一个负责人的程序员,不建议你这么用.后期维护,跨浏览器兼容性,等一些列问题会让大家都头大的.

相关细节请自己查一下expression+ie

css仅仅是样式表而已,没有太多的逻辑运算功能,相反,js作为完善的脚本语言完全可以操作css样式。根据你的需求,你可以使用less,他是css 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,可动态生成css样式。