var()

导读

  • 这篇文章所指的css变量, 并不是指 less 等预编译语言的变量(@)
  • 而是直接在 .css 页面中使用 .js|.html 中所定义的变量 (var()-mdn)
  • 一般情况下 前端样式只要通过 js动态切换不同类名 行内样式
  • 就可以在React Vue 中完成绝大多数的需求了
  • 但是有些使用场景就需要原生 css 的 var() 变量。 或者说使用他可以达到更加方便的效果
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 假设使用了一个组件库的一个小圆点, 而他内部是通过伪元素做的
    // 此时的需求是 小圆点的颜色由用户决定,不是一个固定的值,你该如何控制呢?
    // 我们通常的做法是 
    //    1.定义不同的类名切换:  x => 颜色不是一个固定的值
    //    2.行内样式直接传递:   x => 行内样式不能修改伪元素
    //    3.自己重写:         x => 麻烦,这里只是一个用例,某些场景会极其繁琐
    //    4.css in js       x => 公司项目一般不用这个 
    //    5.dom操作          x => 不推荐
    这时候var()就应运而生了

原生html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# index.html 
<style>
  #dv {
    color: var(--color);
  }
</style>
<body>
  <div id="dv"></div>
  <script>
    let clickColor = 'cornflowerblue'
    const dv = document.getElementById('dv')
    dv.innerHTML = `<div id='dv' style="--color:${myColor}">css</div>`
  </script>
</body>

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import styles from './app.module.css'
const App = () => {
  let clickColor = 'red'
  const style = { "--color": clickColor};
  return (
    <div className={styles.header} style={style}>
      hello
    </div>
  );
};
export default App;
#
.header {
  color: var(--color)
}

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import styles from './app.module.css'
import React from 'react'
const App = () => {
  let clickColor = 'red'
  const style = { "--color": clickColor} as React.CSSProperties;
  return (
    <div className={styles.header} style={style}>
      hello
    </div>
  );
};
export default App;
#
.header {
  color: var(--color)
}

vue2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
	<div class="test">
		<span :style="spanStyle" class="span1">hello world</span>
		<span style="--color:red" class="span1">hello world</span>
	</div>
</template>
<script>
export default {
	data() {
		return {
			spanStyle: { "--color": "green" },
		};
	}
}
</script>
<style scoped>
.span1 {
	color: var(--color);
}
</style>

vue3

1
2
3
4
5
6
# vue3提供了API 直接v-bind就可以使用了
<style scoped>
.span1 {
	color: v-bind(变量);
}
</style>