使用样式字典从设计标记 json 文件中获取 scss

Question

我想从设计团队提供的 json 文件中获取设计标记的 scss 规则。我使用样式字典并设法获得基本设计标记，但很少有标记使用整个对象作为值。

这是我要转换为 scss 的设计令牌示例（从设计团队收到）：

{
"fontFamilies": {
    "inter": {
      "value": "Inter",
      "type": "fontFamilies"
    }
  },
 "fontWeights": {
    "inter-0": {
      "value": "Regular",
      "type": "fontWeights"
    },
  },
"fontSize": {
    "10": {
      "value": "72",
      "type": "fontSizes"
    }
  },
"Display-2xl": {
    "Regular": {
      "value": {
        "fontFamily": "{fontFamilies.inter.value}",
        "fontWeight": "{fontWeights.inter-0.value}",
        "fontSize": "$fontSize.10",
      },
      "type": "typography"
    },
}

注意：简单标记转换成功。样式字典输出如下所示：

$font-families-inter: Inter;
$font-weights-inter-0: Regular;
$font-size-10: 72;
$display-2xl-regular: [object Object];

是否可以使用样式字典并为 display-2xl-regular 之类的标记输出这些规则？

Answer 1

该值是叶节点中的最后一个。

这个：

{
"fontFamilies": {
    "inter": {
      "value": "Inter",
      "type": "fontFamilies"
    }
  },
 "fontWeights": {
    "inter-0": {
      "value": "Regular",
      "type": "fontWeights"
    }
  },
"fontSize": {
    "10": {
      "value": "72",
      "type": "fontSizes"
    }
  },
  "Display-2xl": {
    "Regular": {
      "type": "typography",
      "fontFamily": {
        "value": "{fontFamilies.inter.value}"
      },
      "fontWeight": {
        "value": "{fontWeights.inter-0.value}"
      },
      "fontSize": {
        "value": "{fontSize.10}"
      }
    }
  }
}

会给你：

$font-families-inter: Inter;
$font-weights-inter-0: Regular;
$font-size-10: 72;
$display-2xl-regular-font-family: Inter;
$display-2xl-regular-font-weight: Regular;
$display-2xl-regular-font-size: 72;

此外，单挑风格词典通常会添加一个前缀。

尝试在 div.riot 的 Style Dictionary playground 中玩耍。我创建了一个 example here.

如果您想要父级的值，您也可以摆脱这种情况。

  "Display-2xl": {
    " ": { // Has to be a space. This comment also will break json
     value: "PARENT VALUE"
    },
    "Regular": {
      "type": "typography",
      "fontFamily": {
        "value": "{fontFamilies.inter.value}"
      },
      "fontWeight": {
        "value": "{fontWeights.inter-0.value}"
      },
      "fontSize": {
        "value": "{fontSize.10}"
      }
    }
  }

使用样式字典从设计标记 json 文件中获取 scss

get scss from design tokens json file using style dictionary

javascript

reactjs

style-dictionary

design-tokens