使用样式字典从设计令牌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.ride的风格词典操场上玩一玩。我创建了一个这里的例子。

您也可以逃脱这是您想要一个值在at的父级。

  "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}"
      }
    }
  }