CSS变量variable

最新推荐文章于 2024-07-10 15:14:06 发布

编程世界-云

最新推荐文章于 2024-07-10 15:14:06 发布

阅读量545

点赞数

文章标签： css html 前端 Web前端前端开发

本文链接：https://blog.csdn.net/weixin_45761317/article/details/104032918

版权

本文详细介绍了CSS变量（又称CSS自定义属性）的使用，包括基本用法、继承和层叠、组合与计算，以及如何与JavaScript交互。尽管在某些移动端和IE浏览器中不支持，但CSS变量提供了更好的可维护性、语义化和媒体查询实现，是现代前端开发的重要工具。

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

一直以来，CSS中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。新的草案发布之后，直接在 CSS 中定义和使用变量不再是幻想了。本文将详细介绍CSS变量variable

CSS 变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值。使用自定义属性来设置变量名，并使用特定的 var() 来访问

兼容性：移动端和IE浏览器不兼容

【声明变量】

变量必须以--开头。例如–example-variable: 20px，意思是将20px赋值给–example-varibale变量

可以将声明变量的语句置于任何元素内，如果要设置全局变量，则可以设置为:root、body或html

:root{
  --bgColor:#000;
}

变量声明就像普通的样式声明语句一样，也可以使用内联样式

<body style="--bgColor:#000">

变量声明语句必须包含一个元素内，而不能随意放置

//错误
<style>
--bgColor:#000;
</style>

【使用变量】

使用var()函数使用变量，并且可以被使用在任意的地方。例如：var(–example-variable)会返回–example-variable所对应的值

<body style="--bgColor:#000;">
    <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div>    
</body>

var()函数还有一个可选参数，用来设置默认值，当变量无法取得值时，则使用默认值

<body>
    <div style="width: 100px;height: 100px;background-color: var(--bgCo

关注