Vue3中CSS使用JS变量

html-css0186

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

$ 符号 被 Sass 占用

@ 符号 被 less 占用

因此CSS中采用了 --

JS:

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

PHP:

Scss:

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

CSS:

创建个支持vue3的vite项目

进入到该文件夹

安装依赖

创建一个组件

使用中文引入变量

参考:

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

CSS变量定义通过在变量名前加 var- 前缀实现,引用时使用 var() 获取变量值。例如:

:root {

var-companyblue: #369

var-lighterblue: powderblue

}

h1 {

color: var(companyblue)

}

h2 {

color: var(lighterblue)

}

我们在写样式的时候,可能一个app内的颜色,比如#00ff00,假设这个颜色我用了100次,穿插写在不同的页面里。当需要修改这个主题的时候,会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面,它原始的定义方式及使用方法是这样的

其中,:root是根元素选择器,也就是<html>元素。在这里面定义的变量,可以在整个页面进行使用。

使用的时候,用var()函数进行调用。

注意:约定变量名须以两个连字符'--'开头

小程序中,用法基本也是一样的:

我们在wxss页面中进行定义

注意,page选择器是选中整个页面,前面是没有'.'号的。这是wxss系统自带的选择器。可以看到,用法和css原始用法差别不大。

你也可以在wxml里面直接使用!

这个wxss变量,既可以在每个页面mypage.wxss里面的page里声明,

,就能在所有页面里使用。