CSS变量教程

最新推荐文章于 2023-07-27 19:44:48 发布

想做设计的程序猿

最新推荐文章于 2023-07-27 19:44:48 发布

阅读量166

点赞数

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

本文链接：https://blog.csdn.net/stai1973/article/details/113748564

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS自定义变量的使用，包括变量声明、var()函数的运用，以及变量的默认值设置。通过示例展示了如何通过变量提取重复样式，简化代码，并解释了CSS变量的作用域规则，强调了全局变量通常定义在:root选择器中的最佳实践。

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

关于CSS的自定义变量

css也是支持自定义变量的，而且功能也很强大

主要作用：
1.提取样式中重复的代码值
2.简化相似的代码

CSS变量，又叫做“CSS自定义属性”

首先，变量的声明

CSS变量声明的时候，变量名前面要加两根连词线（–）


    body {
      --foo: #7F583F;
      --bar: #F7EFD2;
    }

–变量名：属性值
（注意：变量名大小写敏感）

var（）函数

是用于读取变量的


    a {
      color: var(--foo);
      text-decoration-color: var(--bar);
    }

var（）函数还可以使用第二个参数，表示默认值，如果该变量不存在的时候，就会使用这个默认值

color: var(--foo, #7F583F);

当变量值是数值，不能直接与数值单位直接连用


    .foo {
      --gap: 20;
      /* 无效 */
      margin-top: var(--gap)px;
    }

这里必须使用calc()函数，将他们连接

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

作用域的问题

CSS变量读取的时候，优先级最高的声明生效，这与CSS层叠的规则一样，也就是说变量的作用域就是它所在的选择器的有效范围

.a {
    --c: red;
}

.b {
    --c: blue;
}

.c {
    --c: green;
}

.d {

    /* --c: yellow; */

    color: var(--c, var(--color, red));
}

这里是a包裹b，b包裹c，c包裹d的结构，定义了一个–c的变量
d元素读取的时候，加入了一个默认值red，如果读取不到–c的话，默认是red
当我们将d元素的–c:yellow注释掉的话，会显示上一级定义的变量的值green，层层向上
因此，一般会将全局变量放在根元素:root里面，确保任何选择器都能读取