css变量

最新推荐文章于 2024-08-07 14:30:00 发布

huxiaoxiao.

最新推荐文章于 2024-08-07 14:30:00 发布

阅读量347

点赞数

分类专栏： css 文章标签：前端 css3

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121548236

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本文介绍了如何在CSS中使用`:root`选择器全局定义变量，并展示了如何通过`var()`函数在样式中引用这些变量。此外，还演示了如何利用CSS变量进行动态计算，例如根据变量值动态设置元素宽度。通过这种方式，可以提高CSS代码的复用性和可维护性。

摘要由CSDN通过智能技术生成

在/css中全局定义变量

:root定义全局样式

 :root{
            font-size: 50px;

/* css中定义变量语法：--变量名:赋值的内容 （变量名不能用数字开头，不能是中文） */
            --borderColor: lightblue;
        }

css中使用变量：使用var()函数

 .name{
            width: 150px;
            height: 90px;
            border: 1px solid var(--borderColor);
        }

 <p class="name">哈哈哈</p>

查看效果;

css中的变量，可以参与计算，需要使用函数calc(计算表达式)

 <div class="box">
        <span style="--i:1">h</span>
        <span style="--i:2">e</span>
        <span style="--i:3">l</span>
        <span style="--i:4">l</span>
        <span style="--i:5">o</span>
    </div>

通过计算表达式给上不同的宽：

  .box span{
             /* 将 行元素 转成 块元素 */
             display: block;
             width: calc(var(--i)*100px);
             height: 30px;
             line-height: 30px;
             border: 1px solid var(--borderColor);
             margin: 20px 0;
        }

查看效果：