场景：

想在CSS中使用JS变量

解决方案

CSS变量

示例：

以在 vue 项目为例：

• 在行内的 style 属性中定义 CSS 变量
• 赋值为 JS 变量
• 在 CSS 中使用行内定义好的 CSS 变量

<!--html-->
<div class="container">
	<div class="test" :style="{
		'--width':width,
		'--color':color,
		'--margin':margin
	}"></div>
</div>

// js
data(){
	return {
		width:'200px',
		color:'#f00',
		margin:'10px 20px 10px 20px',
	}
}

.test{
	width: var(--width);
	color: var(--color);
	margin: var(--margin);
}

当然，css的变量在::after (:after)这些CSS的伪元素中也可以使用，并且可以用在calc计算表达式中

<template>
  <view class="text" :style="{'--lineheight':lineHeight + 'rpx'">
    ...
  </view>
</template>

.text::before {
  content: '';
  float: right;
  width: 0;
  height: calc(100% - var(--lineheight));		// 使用css变量
  background: red;
}

知识点：CSS变量——自定义属性

概念与特性

• 带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用
• CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来

这意味着，同一个自定义属性名可以被多次赋值

语法

定义：
--<name> : <declaration-value>
使用：
color : var(--<name>)

var() 的使用 : https://developer.mozilla.org/zh-CN/docs/Web/CSS/var()

使用示例：

<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>

:root {
  /*定义css变量*/
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  /*使用css变量*/
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  /*给css变量 --first-color 重新赋值*/
  --first-color: #48ff32;
}

#thirdParagraph {
  /*使用css变量*/
  background-color: var(--first-color);
  color: var(--second-color);
}

变量范围

• CSS变量可以在任何元素内定义
• 将CSS自定义属性添加到:root使其可用于页面中的所有元素
• 如果在.container选择器内添加变量，则仅在.container 内可用（作用域问题）

JS与CSS变量进行交互

• 设置元素样式：[el].style.setProperty（[属性名]，[值]）
• 获取元素样式：getComputedStyle（[el]）
• 获取元素样式属性值：[styles].getPropertyValue（[属性名]）

参考链接：

• js设置css自定义变量_CSS变量（自定义属性）
• https://developer.mozilla.org/zh-CN/docs/Web/CSS
• Vue超好玩的新特性：在CSS中使用JS变量