最近學習了一種很酷的 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 的文章。