发现CSS新大陆,看完没收获你捶我！你有没有想过，css中是否可以调用js中的变量？？，React怎样使用变量结合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

React 中style特殊用法

你见过在react中嵌套style标签吗？？反正我是首次看见这样的用法。早上逛github的时候发现的新写法github.com/geist-org/r…

果断测试了下，竟然也可以实现同样的效果。

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 {
  width: number;
}

type HomeProps = IHomeProps & IAppContext;

class Home extends Page<HomeProps, IHomeState> {
  constructor(props) {
    super(props);
    this.state = {
      width: 200,
    };
  }

  render() {
    const { width } = this.state;
    return (
      <div className="home">
        <div className="home-title">测试</div>

        <Button
          className="other-btn"
          onClick={() => {
            this.setState({
              width: 100,
            });
          }}
        >
          打开另外一个弹窗
        </Button>
        <style>
          {`
            .other-btn {
              position: relative;
              width: ${width}px;
              height: 300px;
              margin: 200px auto 0 auto;
              background: red;
            }
          `}
        </style>
      </div>
    );
  }
}

export default Home;

效果：

ccc 00_00_00-00_00_30.gif

考虑可能的应用场景

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

附上css变量兼容表

后语

本文主要记录日常工作的比较有意思的需求解决方案。

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章