我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在网页css代码里面使用变量,是不是大家的第一印象是使用scss或者less之类的编译功能,才能使用变量?事实上,css原生就支持使用变量。那么,在本文中,苏南大叔就主要描述一下如何在css中原生使用变量/var函数。

苏南大叔:css如何原生使用变量?css如何使用var函数? - css-变量
css如何原生使用变量?css如何使用var函数?(图3-1)

大家好,这里是苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。本文描述css中的var函数的使用方法。测试环境:谷歌浏览器。

测试代码

先拿出整个的测试代码:

<style>
  :root {
    --w: 50px;
    --bg: rgb(252, 0, 0);
    --color: white;
  }
  .s0 {
    color: var(--color);
    background-color: var(--bg);
  }
  .s1 {
    --bg: #868585;
    --color: black;
    background-color: var(--bg);
    color: var(--color);
  }
  .s2 {
    background-color: var(--bg);
    color: var(--color);
    font-size: calc(20px + var(--w));
  }
</style>
<div class="s0">
  热心好市民
  <div class="s1">
    苏南大叔
    <div class="s2">uncle sunan</div>
  </div>
</div>
<hr/>
<div class="s0">
  热心好市民
</div>
<div class="s1">
  苏南大叔
</div>
<div class="s2">uncle sunan</div>

测试效果如下:

苏南大叔:css如何原生使用变量?css如何使用var函数? - 运行效果图
css如何原生使用变量?css如何使用var函数?(图3-2)

变量定义

通过观察vscode里面的对css的代码检查,可以推断:

  • 没有-开头的字符串,将被识别为css的属性。
  • 单个-开头的字符串,将被识别为各大浏览器的私有属性。
  • 两个-开头的字符串,将被识别为个人定义的属性。

如果是全局变量,可以定义在::root这个特殊的位置。如果是某个类或者id才会使用到的变量,就定义到对应的css类里面。例如:

  :root {
    --w: 50px;
    --bg: rgb(252, 0, 0);
    --color: white;
  }

变量调用

变量定义之后,使用var函数来进行调用。例如:

  .s0 {
    color: var(--color);
    background-color: var(--bg);
  }

变量继承

变量可以定义在很多位置,如果把它理解为普通的css属性的话,那么就可以非常容易的理解其覆盖性及其继承性。
在本文的例子中,共存在着两组div,第一组中三个div是嵌套关系。第二组中三个div是独立并行关系。因此两组有着不同的继承和属性覆盖的关系。

对于.s2使用--color变量来说,

  • 第一组中的.s2--color变量继承自.s1,取值为white
  • 第二组中的.s2--color变量继承自全局,取值为black

苏南大叔:css如何原生使用变量?css如何使用var函数? - 继承关系
css如何原生使用变量?css如何使用var函数?(图3-3)

var + calc

这里结合以前的一篇文章,csscalc函数和var函数,来讲述这个小部分。范例代码如下:

  :root {
    --w: 50px;
  }
  .s2 {
    font-size: calc(20px + var(--w));
  }

这里需要注意的就是写法:

  • 变量使用--开头。
  • calc中空格的正确使用。

参考文章:
https://newsn.net/say/css-calc.html

总结

本文描述的是css原生使用变量的方式方法,更多css相关文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css