css 自定义属性_视频：有关CSS自定义属性的90秒

最新推荐文章于 2024-10-17 17:03:17 发布

cuotangu3718

最新推荐文章于 2024-10-17 17:03:17 发布

阅读量136

点赞数

文章标签： css java html javascript js ViewUI

版权

去年，我在Future Sync会议上发表了讲话，今年，组织者问我是否可以提供CSS主题的简短记录介绍。我整理了一段90秒的视频，介绍了CSS自定义属性，这是我最喜欢的（相对）最近CSS功能之一，并想在这里与您分享。

下面还有一个成绩单。

CSS自定义属性使您可以存储值以在样式表中重复使用。

如果您熟悉其他编程语言或CSS预处理程序，则可能会遇到变量。 CSS自定义属性也称为CSS变量，它们具有一些相似之处。

例如，我们可以在root元素上定义一个颜色值变量，我们将其称为primaryColor ：

:root{
  --primaryColor: #f542d7 ;
}

这使它成为全局变量，我们可以在样式表中的任何地方使用它来代替属性值。

.some-element{
  background-color:var( --primaryColor );
}

另外，我们可以在选择器上定义custom属性，将其范围限定到选择器及其后代。

.some-element{
  --primaryColor: #f542d7 ;
  background-color:var( --primaryColor );
}

当使用自定义属性时，我们还可以设置默认值。这样，如果在我们使用定制属性时未对其进行定义，则它将回退为默认属性。

.some-element{
  background-color:var( --primaryColor , #6942f5 );
}

可以使用CSS或Javascript更新自定义属性，从而使它们成为真正的动态变量。

我们甚至可以使用它们来计算其他自定义属性的值，这使它们具有一些非常酷的创意可能性。

一个示例是交错的动画效果。

首先，我们为每个元素分配一个自定义属性，该属性对应于元素的索引：

.some-element:nth-child(2){
  --i: 2 ;
}

.some-element:nth-child(3){
  --i: 3 ;
}

然后，我们使用该变量来计算另一个自定义属性，我们将其称为delay ：

.some-element{
  --delay:calc(var( --i , 1 ) * 400ms );
}

现在，我们可以使用该自定义属性代替速记属性中的animation-delay值：

.some-element{
  --delay:calc(var( --i , 1 ) * 400ms );
  animation: fadeIn 1000ms var( --delay ) forwards ;
}

这使我们的代码更加简洁和可维护，并且如果要进行更改，我们不必在很多不同的地方调整值。

亲自尝试以下Codepen演示：

或查看本文以获取关于它们可能有用的其他一些想法。

翻译自: https://css-irl.info/video-90-seconds-on-css-custom-properties/

关注