当前位置：首页 > news >正文

CSS函数

news 来源：原创 2025/5/10 22:43:06

一、背景

二、函数的概念

1. var()函数

2、calc()函数

三、总结

一、背景

今天我们就来说一说，常用的两个css自定义属性，也称为css函数。本文中就成为css函数。先来看一下官方对其的定义。

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。

那么接下来就来说一说，今天的主角，var()和calc()两个常见的css函数，之后也会逐步的去讲解一些，其他的css函数，好了，进入正题，开始var()和calc()的讲解。

二、函数的概念

1. var()函数

这个函数用于插入自定义的属性值

正如官方文档上所介绍的，当我们在制作复杂的网站的时候会有大量的css代码，也会有许多复杂的值，那么同样的值也一定会在不同的地方重复的去运用，那么比如有一天需要将这些值统一的更改为另一个值，如果没有这个函数，我们就需要一个一个的找到这个属性然后注意更改，这就大大的降低了维护的效率，也提高了维护的成本。

所以var()函数的出现，使得CSS 函数可以插入一个自定义属性（有时也被称为“CSS变量”），用来代替非自定义属性中值的任何部分。它允许我们在样式表中定义可重用的值，并在多个地方引用它们。这种机制不仅提高了代码的可维护性和灵活性，还使得动态更新样式成为了可能

接下来就来说一说var()函数的语法：

var(--custom-property-name,fallback-value);

解释：

--custom-property-name：这个属性值是必须设置的，表示自定义属性的名称，名称之前必须要有两个连字符【-】。

fallback-value：这个值可以认为是备用值也可以叫做回退值，也就是说当主属性值无法正常显示的时候就会自动使用备用的属性值，这个值是可选的。建议添加，可以增强代码的健壮性。

声明方式

声明方式有两种，一种是全局声明，另一种是局部声明，故如其名，它们的作用范围是不同的。那么接下来逐一讲解：
1. 全局声明
  
  全局声明通常配合:root伪类【:root伪类的作用：这个伪类是用来匹配根元素的，对于 HTML 来说，:root 表示元素除了[优先级]更高之外，与 html 选择器相同，也就可以认为通过root伪类声明，就相当于在html上进行声明，也就是在整个网页全局声明】进行声明，这样就可以实现全局的声明，以下是全局声明的语法：
```
:root {--main-color: red; /* --main-color就叫做自定义属性的名称 */--second-color: blue;
}
```
1. 局部声明
局部声明需要在元素内部进行声明，或者是在某一块元素中声明声明的语法和全局声明的语法是一样的。这里就不做过多解释。
使用方式

想要使用就必须去声明，声明后就可以在属性中去引用属性值了。

例如：
```
<div class="box">文本</div>
```
```
:root{
--min-color:red;
--second-color:blue;
}
.box{width:200px;height:200px;background:var(--min-color);color:var(--second-color);
}
```
这段代码的结果大家可以去试一下，我这里就把结果告知大家，你会看到一个背景是红色，文字是蓝色的盒子。这就是var()函数的使用。
动态更新

与javaScript配合可以实现动态的更新，首先需要通过js获取到更改变量的值，然后进行更改，随后所有使用了自定义属性名称的属性都会进行改变。

实例：
```
:root{--min-color:red;
}
.box{width:200px;height:200px;background:var(--min-color);
}
```
```
<div class="box">文本</div>
```
```
document.documentElement.style.setProperty('--min-color','blue')
```
这块大家可以猜一下，是什么结果？

效果大家自己实践一下，结果会是一个蓝色背景的盒子，原因就是在js部分通过获取了这个属性的值，进行了动态更改，然后就被更改为了蓝色。

除了动态更新，还有很多的高级的用法。比如下面要说的。
与calc（）配合使用

与calc（）配合使用可以实现很多复杂样式的计算，例如：
```
<div class="box">文本</div>
```
```
.box{--width:200px;width:calc(var(--width)*1.5);height:calc(var(--width)*1.5);background:red
}
```
同样的我不会去展示效果，大家可以自己实践一下，结果就是大家会看到一个300*300的一个红色盒子，大家可以检查元素进行查看。
兼容性问题

关于兼容性的问题大家可以放心使用，从以上可以看出，大部分的浏览器都是支持这个属性的，大家可以放心使用。
小结

关于CSS3中的var()函数为样式表提供了强大的变量支持，使得样式的定义和使用更加灵活和可维护。通过合理使用自定义属性，我们可以减少代码重复，提高开发效率，并轻松实现样式的动态更新。

2、calc()函数

关于这个函数，MDN中是这样解释的：

此 calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。

也就是说可以通过这个函数允许我们将属性值替换为一个表达式，然后将这个表达式的值去替换我们实际使用的属性值。它允许我们在指定 CSS 属性值时使用加法、减法、乘法、除法等基本运算，从而实现更灵活的布局和样式设计

calc() 常用的基本运算：

加法（+）：calc(100% + 20px)
减法（-）：calc(100% - 50px)
乘法（*）：calc(50px * 2)
除法（/）：calc(100px / 2)
取余（%）：calc(100px % 3)
括号（()）：calc((1 + 2) * 3)

语法

property: calc(expression)

property表示想要使用这个函数想css属性，而expression就是要设计的表达式，单位可以混用

可以作为属性值使用

.el {font-size: calc(3vw + 2px);width:calc(100% - 20px);height:calc(100vh - 20px);padding:calc(1vw + 5px);
}

注意：calc() 中的操作符（+、-、*、/）前后必须保留空格，否则会导致计算失败。

使用

在属性值中使用
```
.box {font-size: calc(3vw + 2px);width: calc(100% - 100px);height: calc(10vw - 20px);background: orange;
}
```
用于长度和其他数字
```
.box {width: calc(2px*3);height: 200px;background: orange;
}
```
在媒体查询中使用
```
* {margin: 0;
}
.box {width: 200px;height: 200px;background: orange;
}
@media (max-width: calc(500px + 1rem)) {.box {background: red;}
}
```
max-width：最大的宽度 500px + 1rem(16px) = 516px 这段代码的意思就是：视口的宽度不能超过516Px，在516px范围内背景色是红色

注意：

1、加法和减法要求两个数字都必须有单位

2、除法要求第二个数字是没有单位的

3、乘法要求其中一个数字是没有单位的

三、总结

虽然这些css自定义属性【函数】看上去比较复杂，但是这可以帮助我们更好的去简化代码结构，节省空间，这也是比较推荐的写法，兼容性问题也帮大家看了，大部分主流的浏览器都是兼容的，放心使用即可！！

感觉不错的伙伴，可以加入我的社区，后期会有更多关于前端的知识会分享到社区，欢迎加入！

社区链接：https://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKey=indbz3pgxkw6-kol15r32n3-1-2d4abe395628810b94216b8a35c44ca3&roleId=1170992https://bbs.csdn.net/forums/fe46c651de82465696aeabef266b0476?joinKey=indbz3pgxkw6-kol15r32n3-1-2d4abe395628810b94216b8a35c44ca3&roleId=1170992

一、背景

二、函数的概念

1. var()函数

2、calc()函数

三、总结

相关文章：