Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

preface

Hello everyone! I’m front-end nameless

CSS variable

Have you ever wondered if CSS can call js variables? Today we found a CSS variable to help us out.

CSS variable Definition

Custom attributes (sometimes referred to as CSS variables or cascading variables) are defined by CSS authors and contain values that can be reused throughout the document. Set values by custom attribute tags (e.g. –main-color: black;) Var () : var(–main-color);

Complex sites have a lot of CSS code and often have a lot of duplicate values. For example, the same color value can be used in hundreds or thousands of places, and if it changes, it needs to be searched globally and replaced one by one. Custom properties store a value in one place and reference it in many other places. Another benefit is semantic identification. For example, –main-text-color is easier to understand than #00ff00, especially if the color value is used in other contexts.

Custom attributes are constrained by cascades and inherit their values from their parent.

The basic usage is to start with two minus signs (–).

Basic demo

Let’s directly append style to the DOM to see if the reference variable works in the style file.

<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)); / / key}</style>
</head>


<body>

</body>
    <div class="content">
        <div class="test1" style="--percent: 100deg;">abc</div>
    </div>
</html>
Copy the code

You can see it’s working.

React controls usage through JS and sass references variables

SCSS document

.abc {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
        transform: rotate(var(--percent));
    }
Copy the code

TSX file

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);
    // Set the initial value
    this.state = {
      rotateNumber: '10deg'}; }render() {
    const { rotateNumber } = this.state;
    return (
      <div className="home">
        <div className="home-title">test</div>{/* Reference variable */}<div className="abc" style={{ '--percent': rotateNumber}} >
          1
        </div>
        <Button
          className="other-btn"
          onClick={()= >{// Change the CSS variable this.setState({rotateNumber: '50deg',}); }} > Change the Angle</Button>
      </div>); }}export default Home;

Copy the code

The effect is as follows:

Consider possible application scenarios

For example, now there is a requirement, we need to switch a theme color, theme color is configurable in the background, the front end does not need to upgrade. At this time, we can get the background configuration through JS, and then modify the theme color.

Attach compatibility table

After the language

Your comments are welcome. This article mainly records the daily work of the more interesting demand solutions, we have a good plan to see the comment area, a praise once! Comments are welcome.