发现css新大陆

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

Hello 大家好！我是前端无名

css变量

你有没有想过，css中是否可以调用js中的变量？？，今天才发现有个css变量可以帮我们来搞定。

css变量定义

自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black; ），由var() 函数来获取值（比如： color: var(--main-color) ;）

复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。

自定义属性受级联的约束，并从其父级继承其值。

基本用法就是以两个减号（--）开始。

基本演示

我们直接在dom上加style，看看样式文件中是否引用变量生效。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .test1 {
            position: absolute;
            width: 200px;
            height: 200px;
            color: #fff;
            font-size: 18px;
            top: 0;
            background: red;
            transform: rotate(var(--percent)); //重点
        }
    </style>
</head>


<body>

</body>
    <div class="content">
        <div class="test1" style="--percent: 100deg;">abc</div>
    </div>
</html>
复制代码

可以看到生效了。

React 中通过js控制使用,sass中引用变量

scss文件

.abc {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
        transform: rotate(var(--percent));
    }
复制代码

tsx文件

import React from 'react';
import Page from '@/components/Page';
import './index.scss';
import { IAppContext } from '@/types/IContext';
import Button from '@/components/Button';

interface IHomeProps {}

interface IHomeState {
  rotateNumber: string;
}

type HomeProps = IHomeProps & IAppContext;

class Home extends Page<HomeProps, IHomeState> {
 
 
  constructor(props) {
    super(props);
    //设置初始值
    this.state = {
      rotateNumber: '10deg',
    };
  }

 

  render() {
    const { rotateNumber } = this.state;
    return (
      <div className="home">
        <div className="home-title">测试</div>
         {/* 引用变量 */}
        <div className="abc" style={{ '--percent': rotateNumber }}>
          1
        </div>
        <Button
          className="other-btn"
          onClick={() => {
          //改变css变量
            this.setState({
              rotateNumber: '50deg',
            });
          }}
        >
          改变角度
        </Button>
      </div>
    );
  }
}

export default Home;

复制代码

效果如下：

abc 00_00_00-00_00_30.gif

考虑可能的应用场景

比如现在有个需求，我们需要切换某个主题色，主题色是后台可配置的，前端不用升级。这个时候，我们就可以通过js中获取后台的配置，然后修改主题色。

附上兼容表

后语

欢迎大家多提意见。本文主要记录日常工作的比较有意思的需求解决方案，大家有好的方案评论区见，一赞一回！欢迎评论。

前言