基本样式字典

此示例代码仅展示了该框架的功能。如果您已全局安装了style-dictionary模块，只需切换到该目录并运行

style-dictionary build

您应该看到类似以下输出：

Reading config file from ./config.json
Building all platforms

scss
✔︎ build/scss/_variables.scss

android
✔︎ build/android/font_dimens.xml

ios
✔︎ build/ios/StyleDictionaryColor.h
✔︎ build/ios/StyleDictionaryColor.m

恭喜你，你已经构建了第一个样式字典！接下来，查看我们构建的内容。这应该创建了一个构建目录，它应该看起来像这样：

├── android/
│   ├── font_dimens.xml
│   ├── colors.xml
├── scss/
│   ├── _variables.scss
├── ios/
│   ├── StyleDictionaryColor.h
│   ├── StyleDictionaryColor.m

如果您打开config.json，您将看到其中定义了3个平台：scss、android、ios。每个平台都定义了一个transformGroup、buildPath和files。平台的buildPath和files应该与构建的文件匹配。构建的文件应类似于以下内容：

Android

<!-- font_dimens.xml -->
<resources>
  <dimen name="size_font_small">12.00sp</dimen>
  <dimen name="size_font_medium">16.00sp</dimen>
  <dimen name="size_font_large">32.00sp</dimen>
  <dimen name="size_font_base">16.00sp</dimen>
</resources>

<!-- colors.xml -->
<resources>
  <color name="color_base_gray_light">#CCCCCC</color>
  <color name="color_base_gray_medium">#999999</color>
  <color name="color_base_gray_dark">#111111</color>
  <color name="color_font_base">#111111</color>
  <color name="color_font_secondary">#999999</color>
  <color name="color_font_tertiary">#CCCCCC</color>
</resources>

SCSS

// variables.scss
$color-base-gray-light: #CCCCCC;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-font-base: #111111;
$color-font-secondary: #999999;
$color-font-tertiary: #CCCCCC;
$size-font-small: 0.75rem;
$size-font-medium: 1rem;
$size-font-large: 2rem;
$size-font-base: 1rem;

iOS

@implementation StyleDictionaryColor

+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
  return [[self values] objectAtIndex:colorEnum];
}

+ (NSArray *)values {
  static NSArray* colorArray;
  static dispatch_once_t onceToken;

  dispatch_once(&onceToken, ^{
    colorArray = @[
[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f],
[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
[UIColor colorWithRed:0.07f green:0.07f blue:0.07f alpha:1.0f],
[UIColor colorWithRed:0.60f green:0.60f blue:0.60f alpha:1.0f],
[UIColor colorWithRed:0.80f green:0.80f blue:0.80f alpha:1.0f]
    ];
  });

  return colorArray;
}

@end

非常巧妙！这展示了几个发生的事情：

构建系统对在config.json的source属性中定义的所有属性JSON文件进行了深度合并。这允许您以任何您想要的方式分割属性JSON文件。有两个具有`color`作为顶级键的JSON文件，但它们被正确合并。
构建系统可以解析对其他样式属性的引用。《{size.font.medium.value}》被正确解析
构建系统同时处理对其他文件中属性值的引用，如您在properties/color/font.json中看到的。

现在让我们进行一些更改，看看它会如何影响事情。打开properties/color/base.json并将`"#111111"`更改为`"#000000"`。在您进行更改后，保存该文件并重新运行构建命令style-dictionary build。打开构建文件并查看。

好了！

现在您可以开始创建！查看所有内置的转换和格式。

CocoaColorPalette 1.0.0

CocoaColorPalette 1.0.0

CocoaColorPalette 1.0.0

基本样式字典