如何使用 Avocode 3 生成 CSS 变量

在本教程中，我将向您展示如何使用 Avocode 3 生成 css 变量。我们将使用从 adobe XD 或 sketch 等设计应用程序导入的设计。

Avocode 3 实际上可以为预处理器（Sass、LESS、Stylus 等）生成变量，但为了简单起见，我们将使用原生 CSS 变量。我们将为设计的颜色、排版和一些布局选项创建变量。这些是我们有时可能想要更改的最终产品的方面（为所有内容创建变量并不是很有效）。

从颜色开始

如果您按照课程进行操作，您会看到我们创建了一大堆色板，以便轻松生成配色方案，并且我们根据设计中使用的位置为每个色板命名。

选择我们的样本后，您将看到属性中显示的实际颜色值。在这种情况下，它是#8b959d，所以突出显示并复制它。

创建变量

在您突出显示的值下方，您将看到“变量”窗口。单击+按钮添加一个新的。

在弹出的对话框中，将颜色值粘贴到替换文本字段中。然后，在变量名称字段中，输入您要使用的变量名称。现在，在设计中找到的任何颜色值实例都将替换为变量。

您会注意到我们_color在变量字符串的末尾使用了。一旦我们进入代码，这将很有帮助，因为我们将能够区分一种类型的变量和另一种类型的变量。

以下是变量设置后的显示方式：

其他变量

相同的过程适用于其他变量。在第一个示例中我们使用十六进制值表示颜色，您可以添加字体系列名称、数值，无论您喜欢什么。它们都可以用相同的方式替换为 CSS 变量。

因此，您可以在 CSS 的大部分方面使用变量。尺寸、媒体查询、计量单位，由您决定！查看视频以获得进一步的解释。

导出代码

现在是所有这一切的一个非常重要的部分：导出将我们的变量带入浏览器的 CSS 代码。准备好所有变量后，在“变量”面板中单击“导入/导出”按钮。

在弹出的对话框中，点击导出选项卡。你会发现所有的变量都在等着你去复制。然后，您可以将变量粘贴到样式表中，但请确保包含一个:root将它们全部嵌套的元素，如下所示：

然后，您可能会发现在此样式表中排列变量很有用，以便更易于管理（颜色与颜色、印刷变量彼此之间等等）。

结论

这就是您可以使用 Avocode 从设计中生成 CSS 变量的方法！这样做比手动编写 CSS 变量要快得多，所以这是一个非常有用的功能，我相信你会喜欢使用的。