发现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>
复制代码

image.png

可以看到生效了。

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中获取后台的配置,然后修改主题色。

附上兼容表

image.png

后语

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

猜你喜欢

转载自juejin.im/post/7018471928025317412

相关文章