css变量拼接图 |css鼠标高亮

首先，大家需要在 :root 伪类中定义大家的变量。比如：

:root {
--icon-close: url('/images/close.svg');
}

这里定义了一个名为“icon-close”的变量，它的值是一个 URL，指向关闭图标的 SVG 文件。

接下来，大家可以在任何带有样式的元素中使用该变量，比如按钮。大家可以通过 ::before 或 ::after 伪元素来添加该图标：

button::before {
content: var(--icon-close);
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}

这里，大家通过 content 属性将变量插入到伪元素中。然后，大家指定了图标的宽度、高度和右边距。

最后，大家可以通过使用 calc() 函数来拼接图标和文本的各种样式。比如，如果大家希望在按钮的文本前面添加图标，大家可以这样做：

button {
padding-left: calc(16px + 8px);
/* 假设图标是 16px 宽，文本左侧留 8px 的空白 */
}
button::before {
content: var(--icon-close);
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
}

这样，大家就可以成功地将这个图标添加到按钮上，并且可以轻松地调整其位置和大小。

如果你想要更多的变量拼接图的例子，可以查看 CSS Tricks 的文章。