Talking about the use of CSS3 custom variables in projects from a project reconstruction

body{
    --color:red;
}

<div class="main-left-bottoms">
    <div id="tabs">
        <ul>
            <li class="on"><a name="anchor">Club activities</a></li>
            <li>Community Direction</li>
            <li>Message from the President</li>
            <li>Talent strategy</li>
        </ul>
        <div>
            <p>Since its establishment, YouC Club has held a large number of activities to enrich the extracurricular life of club members and achieve the goal of combining work and rest. Facts have proved that this is indeed effective. <br>
                For example,
            <ol>
                <li>On Mother's Day, we held <a href="http://www.50004.com/play52/fabebbfffcfa/XMzYwMzUwNjM4MA==/">
                    "Filial Piety·Mother's Day" event</a> (video loading may be a little slow) and achieved great success;</li>
                <li>During the winter solstice, we held a <a href="http://sfxy.nyist.edu.cn/info/1068/3802.htm">"Winter Solstice Dumpling Making" activity with the school and the dormitories. Everyone had a lot of fun.</li>
                <li>In our spare time, we also actively participated in the <a href="https://max.book118.com/html/2018/0513/166191393.shtm">"Visiting the Nursing Home" activity organized by the hospital, and had a great experience;</li>
            </ol>
        </div>
        <div class="hide">
            <p>&nbsp;&nbsp;YouC Studio was founded in 2009 and has a history of <span id="fffffyear"></span> years. <br>&nbsp;&nbsp;After these years of development, the community has produced talents in various fields, including PHP, Java, JavaWeb,
                Big data and so on. . . <font color="red">The current mainstream learning direction of this club is JavaWeb, that is, back-end implementation, which is more inclined towards website development. </font> <br>&nbsp;&nbsp;The community often completes the development of a project through corresponding exchange activities.
                In order to enhance their knowledge, members will occasionally participate in competitions and have achieved good results. <br><br>
                <font color="#ff7f50"> For specific personal plans, please scan the QR code on the right to ask seniors! </font></p>
        </div>
        <script>
            document.getElementById('fffffyear').innerHTML = (new Date().getFullYear() - 2009) + '';
        </script>
        <div class="hide">
            <br><br>
            <p>Although people are constantly joining and leaving, YouC is still here, waiting for you, and I firmly believe that the future of YouC will be even brighter! </p> <p>——President’s wish</p>
        </div>
        <div class="hide">
            <br>
            <p>Join us, join YouC. Here, you can have a wonderful knowledge experience. Seniors with great imaginations will lead you to explore knowledge, learn skills, carry out practical projects, and prepare for interviews. </font><br>
                Here, you can find happiness beyond your imagination! ! ! </p>
        </div>
    </div>
</div>

.main-left-bottoms{width: 100%;min-height: 280px;margin-top: 10px;}
.main-left-bottoms h1{color: orangered;font-style: italic;}
.main-left-bottoms #tabs{width: 99%;padding:5px;min-height: 280px;}
.main-left-bottoms #tabs ul{list-style:none;display:block;min-height:30px;line-height:30px;border-bottom:2px red solid;}
.main-left-bottoms #tabs ul li{cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:2px groove orangered;border-bottom:none;display:inline-block;width:65px;text-align:center;font-weight: bold;color: black;padding: 0 10px;}
.main-left-bottoms #tabs ul li.on{border-bottom:2px solid skyblue;}
.main-left-bottoms #tabs div{min-height: 199px;line-height:25px;border-top:none;padding:0.3125em;overflow:hidden;}
#tabs div p{font-size: 0.838rem;}
#tabs div ol li{font-size: 0.875rem;margin-top: 5px;}
#tabs div ol li a{color: lightcoral;text-decoration: none;}
#tabs div ol li a:hover{color: orange;}
.main-left-bottoms .hide{display:none;}

<div class="tab-navbar">
    <nav>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">Title{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="tabs" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">I am the content {{i + 1}}</li>
        </ul>
    </div>
</div>

.tab-navbar {
    display: flex;
    overflow: hidden;
    border-radius: 10px;
    width: 300px;
    height: 200px;
    nav {
        display: flex;
        height: 40px;
        background-color: #f0f0f0;
        line-height: 40px;
        text-align: center;
        a {
            flex: 1;
            cursor: pointer;
            transition: all 300ms;
            &.active {
                background-color: #3c9;
                color: #fff;
            }
        }
    }
    div {
        flex: 1;
        ul {
            --tab-index: 0;
            --tab-width: calc(var(--tab-count) * 100%);
            --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
            display: flex;
            flex-wrap: nowrap;
            width: var(--tab-width);
            height: 100%;
            transform: translate3d(var(--tab-move), 0, 0);
            transition: all 300ms;
        }
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            background-color: var(--bg-color);
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
    }
}

export default {
    data() {
        return {
            index: 0,
            list: ["#09f", "#f90", "#66f", "#f66"]
        };
    },
    methods: {
        select(i) {
            this.index = i;
            this.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

<ul class="strip-loading">
	<li style="--line-index: 0"></li>
	<li style="--line-index: 1"></li>
	<li style="--line-index: 2"></li>
	<li style="--line-index: 3"></li>
	<li style="--line-index: 4"></li>
	<li style="--line-index: 5"></li>
</ul>

.strip-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    li {
        --time: calc(var(--line-index) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}
@keyframes beat {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(.5);
    }
}

<button class="track-btn">
	<span>Young man, click me and I will give you strength</span>
</button>

.track-btn {
	margin: 0;
	padding: 0;
	/*Custom border*/
	border: 0;
	/*Eliminate the default blue border effect when clicking*/
	outline: none;
	-webkit-appearence: none;
	overflow: hidden;
	position: relative;
	border-radius: 25px;
	height: 49.9px;
	background-color: #66f;
	cursor: pointer;
	line-height: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: #fff;
	padding: 0 20px;
	span {
		position: relative;
		pointer-events: none;
	}
	&::before {
		--size: 0;
		position: absolute;
		left: var(--x);
		top: var(--y);
		width: var(--size);
		height: var(--size);
		background-image: radial-gradient(circle closest-side, #09f, transparent);
		content: "";
		transform: translate3d(-50%, -50%, 0);
		transition: width 200ms ease, height 200ms ease;
	}
	&:hover::before {
		--size: 200px;
	}
}

const btn = document.getElementsByClassName("track-btn")[0];

btn.addEventListener("mousemove", e => {
	btn.style.setProperty("--x", `${e.offsetX}px`);
	btn.style.setProperty("--y", `${e.offsetY}px`);
});

//Reference/modify the css3 variable value in style document.documentElement.style.setProperty("name", value)

#angular {
	--angular: "";
}
#angular:checked {
	 --angular: "angular";
}

:root { 
	--size: 1.5em; 
} 
@media (min-width: 30em) { 
	:root { 
		--size: 2em; 
	} 
} 
.Container {
	margin: 0 auto; 
	max-width: 60em; 
	font-size: var(--size); 
}