css使用变量_如何使用Avocode 3生成CSS变量

css使用变量

在本教程中，我将向您展示如何使用Avocode 3生成CSS变量。我们将使用从Adobe XD或Sketch之类的设计应用程序导入的设计。

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

Avocode 3和CSS变量

从颜色开始

如果您按照课程进行学习，就会发现我们创建了一大堆色板，以便于生成配色方案，并根据设计中使用的位置对每个色板进行了命名。

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

创建一个变量

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

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

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

设置变量后，其显示方式如下：

其他变量

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

因此，可以将变量用于CSS的大多数方面。 大小，媒体查询，度量单位由您决定！ 观看视频以获取更多说明。

出口代码

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

在弹出的对话框中，单击“ 导出”选项卡。 您将找到所有等待复制的变量。 然后可以将变量粘贴到样式表中，但请确保包含:root元素以将其全部嵌套，如下所示：

:root {

    /* variables go here */

}

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

结论

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

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-generate-css-variables-with-avocode-3--cms-31837

css使用变量