您知道 CSS 自定义属性也可以处理图像吗？

因此，您可能已经了解 CSS 自定义属性，它可以让您设置一个变量（例如主题颜色），然后像这样将其应用于多个类

:root {
  --theme: #777;
}

.alert {
  background: var(—-theme);
}

.button {
  background: var(—-theme);
}

好吧，我已经看到这种模式很多次了，我认为自定义属性只能用于像 rgba 或十六进制这样的颜色值——尽管事实并非如此！在经过一些实验和探索后，我意识到可以使用自定义属性来设置图像路径。

这是一个实际应用的示例

:root {
  --errorIcon: url(error.svg)
}

.alert {
  background-image: var(--errorIcon);
}

.form-error {
  background-image: var(--errorIcon);
}

很酷，不是吗？我认为这可以用来创建一个图标系统，您可以在其中定义一个完整的图像列表 :root 并在需要时调用它。或者，您也可以根据其状态或可能在媒体查询中更容易地对某些类进行主题化。记住，自定义属性也可以在元素内被覆盖

:root {
  --alertIcon: url(alert-icon.svg)
}

.alert {
  background-image: var(--alertIcon);
}

.form-error {
  --alertIcon: url(alert-icon-error.svg)
  background-image: var(--alertIcon);
}

而且，考虑到自定义属性可以在 JavaScript 中被选中，请考虑交换图像的可能性。我认为这可能很有用！

MaxArt

# 2019 年 2 月 27 日

是的，它们可以存储 URL 引用。

而且还有更多。它们也被认为用于 CSS“混合”（现在已废弃的 @apply 规则提案），因为它们可以存储整个 CSS 规则，因此您可以编写

:root {
  --foo: { color: red; }
}

而且您现在就可以做到这一点，并且 CSS 将是有效的。不幸的是，它没有任何用处…… 至少没有 JavaScript 的话。

顺便说一下，自定义属性还可以存储字符串甚至 JavaScript 片段……

Shaddy

# 2019 年 2 月 27 日

您说得对！谢谢你的提示

yishn

# 2019 年 2 月 28 日

需要注意的是，URL 将相对于使用自定义属性的文件解析，而不是相对于定义它们的文件…… 这使得您想要在另一个文件中覆盖自定义属性以进行主题化变得有点困难

Mathew Shaw

# 2019 年 2 月 28 日

您也可以这样做

--icon-search: url('data:image/svg+xml,\
<svg viewBox="-24 -24 48 48" xmlns="http://www.w3.org/2000/svg">\
  <title>Search</title>\
  <g transform="translate(-4 -8)">\
    <g transform="rotate(45)" fill="none" stroke="black">\
      <circle r="14" stroke-width="3"/>\
      <line x1="17" x2="30" stroke-width="6" stroke-linecap="round"/>\
    </g>\
  </g>\
</svg>');

为什么要这么麻烦？

节省了额外的下载，使您能够将所有图标保存在一个易于阅读的文件中。

请注意，这只适用于干净且手工制作的 SVG。在此示例中，搜索图标只是一个圆圈和一条线，如果它是从 1990 年代风格的桌面出版程序中作为 SVG 重新生成，它将在其中包含各种杂物，以及以十进制数表示的圆圈定义，所有这些都指定到小数点后九位，这有点过分，当您只需键入半径和描边宽度的圆圈时。

您也可以对图标进行过滤，因此如果以上内容设置为以白色作为描边，那么在 CSS 中您可以将亮度降低到 0.1 以使其变为黑色。

命名空间是 CSS SVG 中必需的，而内联 CSS 中则不需要。
每行上的反斜杠使它更易读，并允许换行。
对带有十六进制代码的颜色的所有引用都需要转义井号字符作为 %23。因此，在此示例中，有命名颜色（黑色）。
title 属性也可以使用，这有助于识别您的图标。

Manny Fleurmond

# 2019 年 2 月 28 日

您是否可以将变量保存在单独的文件中以方便主题化？

Geoff Graham

评论永久链接# 2019 年 3 月 1 日

当然——如果您使用的是像 Sass 这样的预处理器，那么您可以将它们保存在一个部分中，并将其附加到 :root 或其他顶级元素或父组件中，它们将在其中使用。

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。