使自定义属性（CSS变量）更动态

CSS自定义属性（可能更容易理解为CSS变量）为我们提供了使代码更简洁的方法，并引入了以前不可能使用CSS的新方法。它们可以做预处理器变量所能做的…但也可以做得更多。无论您是CSS声明性的粉丝还是喜欢用JavaScript处理大多数样式逻辑，自定义属性为每个人带来了一些东西。大多数功能来自于自定义属性的两个独特功能： - 级联功能使用JavaScript修改值的功能，当您将自定义属性与其他现有的CSS概念相结合时，会暴露出更多的功能，像calc().基础知识您可以使用自定义属性来有效地执行Sass等预处理器中的变量提供的操作–设置全局或作用域变量值，然后在以后的代码中使用它。但是由于级联，您可以在更具体的规则中提供新的属性值。这种级联可以产生一些有趣的方法，如Violet Peña概述了变量的主要好处，Chris总结了站点主题选项。人们已经讨论了级联的这些好处好几年了，但是，尽管它是区别于预处理器的一个关键功能，但它常常在对话中迷失方向。Amelia Bellamy Royds在2014年在SVG和use的背景下讨论了它，Philip Walton在2015年指出了许多这些一般的级联好处，去年Gregor Adams展示了如何在最小网格框架中使用它们。利用层叠可能是开始使用自定义属性并考虑逐步增强的最简单方法。好的。既然我们知道定制属性可以在本机上为我们提供预处理器所拥有的一些功能和一些新的用途，这要归功于层叠——它们是否提供了我们以前从未做过的任何事情？当然！个性化属性所有包含多个部分的属性现在都可以以不同的方式使用。多个background可以分开，多个transition-duration可以分开。你可以用几个自定义属性设置一个规则，然后独立地更改值，而不是像transform: translateX(10vmin) rotate(90deg) scale(.8) translateY(5vmin)这样的规则。.view {transform:translateX(var(--tx, 0))rotate(var(--deg, 0))scale(var(--scale, 1))translateY(var(--ty, 0));}.view.activated {--tx: 10vmin;--deg: 90deg;}.view.minimize {--scale: .8;}.view.priority {--ty: 10vmin;}初始化需要一点时间，但是前面的一点点额外工作会让你根据类/选择器规则的需要独立地修改每个转换函数。然后，您的标记可以包含在每个.view元素上定义的任何或所有类，transform将相应地更新。当独立的转换属性即将到来时（此时translate、scale和rotate将是一级公民），它们目前只在Chrome中的一个标志后面。使用自定义属性，您现在可以获得更多支持来获得此功能（另外还可以定义您自己的函数顺序，因为rotate(90deg) translateX(10vmin)与translateX(10vmin) rotate(90deg)不同）。如果您同意它们共享相同的计时选项，当使用transition更改任何变量时，它们甚至可以平滑地设置动画。这有点神奇。从没有单位到所有单位，你可以在这些概念的基础上结合calc()。不必总是像上面那样用单位（--card-width: 10vmin或--rotation-amount: 1turn）设置变量，您可以删除这些单位，并在更多相互关联的地方使用它们。现在，我们的自定义属性中的值可以比以前更具动态性。虽然calc()已经存在了几年，但当试图通过使用不同单位添加值来获得结果时，它可以说是最有用的。例如，您有一个流体width，单位为百分比，需要缩短50px（width: calc(100% - 50px)）。但是，calc()可以执行更多操作。在calc中还可以执行乘法等其他操作来调整值。下面的内容是有效的，让我们感觉到变换和过滤器是相互关联的，因为它们都使用数字10。.colorful {transform:translateX(calc(10 * 1vw))translateY(calc(10 * 1vh));filter: hue-rotate(calc(10 * 4.5deg));}这可能不是常见的用例，因为它是一个不需要浏览器来计算的计算。10 * 1vw永远是24***所以计算器什么也没给我们。在使用带有循环的预处理器时，它可能很有用，但这是一个较小的用例，通常可以在不需要CSScalc26***的情况下完成。但是如果我们用一个变量替换重复的10呢？您可以在多个位置基于单个值，甚至使用不同的单位，也可以打开它以在将来更改值。由于使用了无单位变量和calc，以下值是有效的：.colorful {--translation: 10;transform:translateX(calc(var(--translation) * 1vw))translateY(calc(var(--translation) * 1vh));filter: hue-rotate(calc(var(--translation) * 4.5deg));will-change: transform, filter;transition: transform 5000ms ease-in-out, filter 5000ms linear;}.colorful.go {--translation: 80;}可以取单个值（最初为10，或后来更改为80…或任何其他数字），并分别应用于vw单位或***31*

使自定义属性（CSS变量）更动态

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么