原生css样式实现简单的变量定义

最新推荐文章于 2024-10-03 13:26:44 发布

原创最新推荐文章于 2024-10-03 13:26:44 发布 · 550 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何利用CSS变量控制页面样式，通过定义--color和--size变量，实现字体大小和背景颜色的统一管理，使样式调整更加便捷。

以前都是使用sass, less来定义变量，通过变量来控制一些公共的样式，看了一篇后发现原来css也可以直接使用

写了一个小demo，先看一下效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css变量改变</title>
</head>
<style>
    :root{
        --color: red;
        --size: 22px;
    }
    .box{
        width: 200px;
        height: 200px;
        text-align: center;
        font-size: var(--size);
        background-color: var(--color);
    }
</style>

<body>
    <div class="box">erweew</div> 
   

   
</body>

</html>