你需要知道的calc和自定义属性!

·  阅读 674
你需要知道的calc和自定义属性!

当大多数人想到在 Web 上进行计算时,他们会想到 JavaScript。考虑到 JavaScript 是 Web 的主要编程语言,这是有道理的,但是如果我告诉你,你可以只用 CSS 进行相当复杂的计算。老实说,它非常神奇且很有用。

什么是 CSS 计算?

首先,我们需要谈谈 CSS calc 是什么以及如何使用它。用最简单的术语来说,CSS calc 只是一个 CSS 函数,类似于rgb,var等,它可以让您对各种 CSS 单元进行加法、减法、除法和乘法运算。这是一个简单的例子。

.class {
  width: calc(200px + 100px);
}
复制代码

上面的 CSS 将这个框的宽度设置为 300px(200px 加上 100px)。

诚然,这不是很有用。我的意思是我们可以只写 300px 并节省大量时间,但这只是 CSS calc 的开始。

组合不同的单位

使用 CSS calc,我们可以将不同的 CSS 单元组合在一起,以创建传统 CSS 单元无法表示的值。例如,如果我们想创建一个距离 100vw 宽 30px 的盒子怎么办。本质上是一个 100vw 的盒子,其中移除了 30px 的空间。

.class {
  width: calc(100vw - 30px);
}
复制代码

这就是你需要做的。只需将 100vw 和 30px 放入您的 calc 函数中,CSS 就会为您处理所有复杂的数学运算。现在,无论您的屏幕多宽或多小,框总是比屏幕的全宽小 30 像素。 现在,仅此一项就足以使 CSS calc 令人惊叹,但是您可以更进一步,将其与 CSS 变量结合使用。

CSS 变量和计算

现在,我们可以讨论如何在 calc 中使用 CSS 变量。您需要做的就是用变量替换 calc 函数中的一个值。例如:

.class {
  --w: 100px;
  width: calc(var(--w) * 2);
}
复制代码

我们现在有一个 200px 宽的盒子,因为我们将 100px--w变量乘以 2。那--w是什么呢?那在这里也说一下css的自定义属性。

自定义属性的由来

在很长一段时间内,原生 CSS 在代码复用方面有所欠缺,例如典型的例子 - 主题,每一个 font-sizecolorborder 等属性值必须重复编写,若有改动则每一处都要修改。如何解决这个疑难杂症,许多开发人员转向 CSS 预处理器(例如 SASS、Less)来处理 CSS 中的变量。在过去的几年里,CSS 一直忙于添加新特性,其中一个特性就是自定义属性。这些自定义属性是 CSS 的变量版本,比任何预处理器变量都强大得多。

自定义属性(变量)

属性名能够自定义,属性值是任意合法 CSS 值。 属性名以 -- 开头,大小写敏感,如 --auto-color: red,通过 var(--auto-color defaultValue) 引用

body {
  --auto-color: red
}
child {
  width: var(--auto-color, black)
}

复制代码

默认会被继承,所以定义在 :root 伪类下,则所有子元素都可以获取到。

若自定义属性不合法或不存在,会被该属性的默认值替换,例如:

child {
  width: var(--auto-color1,red)  //red
}

复制代码

自定义属性默认值

由于自定义属性是 CSS 的一部分,而不是像在预处理器中那样从代码中编译出来,因此可以在 JavaScript 中访问和修改它们。让我们使用下面的 CSS 来演示如何在 JavaScript 中访问和修改自定义属性。

:root {
  --color: red;
}

.custom-btn {
  --background-color: blue;

  color: var(--color);
  background-color: var(--background-color);
}
复制代码

我们在两个元素上都设置了自定义属性,.custom-btn类以及文档根,在 Web 开发的情况下是 html 元素。我们该如何在 JavaScript 中获取这些属性的值呢?请看下面例子:

/* 这个将从根元素返回变量color值 */
getComputedStyle(document.documentElement).getPropertyValue('--color')

const customButton = document.querySelector('.custom-btn')
getComputedStyle(customButton).getPropertyValue('--color')

getComputedStyle(customButton).getPropertyValue('--background-color')
复制代码

代码首先获取元素的计算样式。这将确保--color正确计算所有继承的值,例如自定义按钮的值。然后该getPropertyValue函数用于获取属性的值,就好像它是任何其他 CSS 属性一样。

至于设置自定义属性的值,则更加简单。

// 例子1

document.documentElement.style.setProperty('--color', 'green')

// 例子2

const customButton = document.querySelector('.custom-btn')
customButton.style.setProperty('--background-color', 'yellow')
复制代码

设置自定义属性就像设置任何其他 CSS 属性一样。首先需要访问元素的样式,然后setProperty可以通过传递要设置的属性名称和要设置的值来使用该函数。那我们回过头来说calc

用 Calc 转换单位

除了在 calc 中使用 CSS 变量之外,您还可以将没有单位的值转换为有单位的值,只需将该值乘以您要转换为的单位类型的 1。如果您在 JS 中设置了不包含单位的 CSS 变量,这将非常有用。

.class {
  --fav-num: 3;
  width: calc(var(--fav-num) * 1px);
}
复制代码

使用这个简单的计算函数,我将--fav-num变量从无单位值转换为基于像素的值。

CSS 计算陷阱

幸运的是,calc 使用起来非常简单,但有一个问题需要注意。CSS calc 函数内部的间距非常重要。calc 函数中的每个值和它们之间的运算之间必须有一个空格。calc 函数的括号前也不能有空格。例如,以下所有内容都是无效的 CSS。

.class {
  width: calc(1px+ 2px);
  width: calc(1px +2px);
  width: calc(1px+2px);
  width: calc (1px + 2px);
}
复制代码

兼容

calc兼容性还是蛮好的!自定义属性不支持IE!

image.png

image.png

结论

CSS calc和自定义属性是非常有用的功能,看起来它只有一个小众用例,但实际上开辟了很多可能性。虽然大家普遍习惯用Sass或者Less,但是我还是强烈建议您在下一个项目中使用 calc和自定义属性,因为它极大地简化了 CSS 代码。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改