开发人员喜欢新项目。空白的画布。

在新项目中我最喜欢做的事情之一是设置主题，思考新应用程序的外观和感觉。但是这项工作变得乏味，我最终从旧项目中复制并粘贴了许多CSS和JS变量。

为了解决我的问题，我创建了一个轻巧的，可能太简单的包装，称为varbq，发音为烧烤，因为，嘿，阵亡将士纪念日即将到来。

我倾向于一遍又一遍地使用相同的主题格式，这与令人惊叹的书Refactoring UI列出的内容非常相似。

这些项目通常具有主要，次要，口音和灰色，每个颜色具有五到九个阴影，例如主要的200和Accent900。它们还将包括间距尺寸，以保持应用程序统一，例如spacing100: 4px，spacing200: 8px等。版式，阴影以及偶尔的屏幕尺寸也是如此。

这是varbq派上用场的地方。

安装后，运行命令npx varbq build以创建varbq.json文件。传递可选标志--js或--css仅创建这些文件（例如，如果是一个反应本机项目），否则都会生成。如果不存在，此命令将创建一个varbq.json文件。

文件中的每个键将基于值数组创建变量，增量为100。因此...

{
  "primary": ["hsl(216, 99%, 98%)", "hsl(216, 98%, 92%)", "hsl(216, 95%, 86%)"],
  "spacing": ["4px", "8px", "12px"]
}

变成...

export const varbq = {
  primary100: "hsl(216, 99%, 98%)",
  primary200: "hsl(216, 98%, 92%)",
  primary300: "hsl(216, 95%, 86%)",
  spacing100: "4px",
  spacing200: "8px",
  spacing300: "12px"
}

和...

:root {
  --primary100: hsl(216, 99%, 98%);
  --primary200: hsl(216, 98%, 92%);
  --primary300: hsl(216, 95%, 86%);
  --spacing100: 4px;
  --spacing200: 8px;
  --spacing300: 12px;
}

在项目根部，可变文件活在varbq/中。

查看文档以获取更多信息，并让我知道您将来希望看到的任何功能。