样式映射

D2C PRO 支持将图层样式信息映射为对应的 CSS 类名 (class name)。在生成代码时，会直接输出这些映射好的原子级 CSS 样式。

此机制可无缝适配流行的原子化 CSS 框架（如 Tailwind CSS）以及您自定义的样式类库。因此，我们推荐在项目中采用原子级 CSS 类来构建 UI 界面，以提升代码效率和可维护性。

为什么推荐使用原子级 Class 类来构建 UI 界面

原子级 Class 类的使用方法通常被称为原子化设计或功能类 CSS（Functional CSS）。其理念是将样式属性拆分为最小的单元，并为每个单元创建一个独立的 Class 类。这些 Class 类只包含一个特定的样式属性，比如 color-red、font-size-large 或 margin-top-20。它具有以下优点：

灵活性：

原子级 Class 类可以轻松地组合和重用，使得界面构建更加灵活。通过组合不同的 Class 类，可以快速创建各种不同的样式组合，而无需编写大量自定义样式。

可维护：

由于原子级 Class 类具有单一职责，它们更易于理解和维护。当需要修改样式时，只需针对具体的 Class 类进行修改，而不需要修改整个样式表。

性能优化：

原子级 Class 类通常生成较小的样式表，有助于减少页面加载时间。此外，由于只应用所需的样式属性，减少了不必要的样式计算，提高了渲染性能。

一致性：

原子级 Class 类遵循统一的命名规则，使开发人员能够更容易理解和预测样式行为。这有助于保持界面一致性，减少样式冲突和意外行为。

以上来自 Chatgpt 的回答。

小提示

阅读此文件时，建议你先打开 DSM 中的 mappings.json 一边阅读一边尝试。

格式说明

通过下面的文档你会很快的发现，这其实就是规范的 CSS 属性。我们为了解析设计稿的样式并将其转化为 CSS 属性。所以要按照本功能提供的格式来编写映射程序。

alt text

上面这段 Json 的 key 为 MasterGo 输出的属性。 value 映射后的 Class name。如果映射表里没有找到你设计稿的属性，则以 style 输出如：style="width: 400px;"。

关于类名的前缀设置

类名可以在样式解析器中通过渲染器选项来统一设置前缀。如果在样式解析器中设置了前缀，当前样式映射就不需要加上前缀了。例如：

json

// style-parsers
"justifyContent": {
  "nodeName": "",
  "filter": "",
  "classAttr": "class",
  "styleAttr": "style",
  "classPrefix": "justify-",
  "stylePrefix": "justify-content",
  "getCssVar": false,
  "mappings": {}
}

// mappings
"justify-content": {
  "flex-start": "start",
  "center": "center",
  "flex-end": "end",
  "space-between": "between"
}

// 输出为
justify-start

以下的示例将以 Tailwind 为基础来配置样式映射。这并不代表你只能使用 Tailwind 的工具类。如果刚好你想配置一个 Tailwind 的工具类，你可以直接将下面的代码复制，然后添加到 DSM 的 mappings.json 中。

width

key: width 的值

json

"width": {
  "0": "0",
  "1": "px"
  //.....
}

min-width

key: min-width 的值

json

"min-width": {
  "0": "0",
  "1": "px"
  //.....
}

max-width

key: max-width 的值

json

"max-width": {
  "0": "0",
  "1": "px"
  //.....
}

height

key: height 的值

json

"height": {
  "0": "0",
  "1": "px"
  //.....
}

min-height

key: min-height 的值

json

"min-height": {
  "0": "0",
  "1": "px"
  //.....
}

max-height

key: max-height 的值

json

"max-height": {
  "0": "0",
  "1": "px"
  //.....
}

display

key: flex

当前只支持将设计稿的 Auto layout 转化为 flex layout

json

"display": {
  "flex": "flex"
}

flex

key: none | hug-x | hug-y | fill-x | fill-y | wrap

画布属性	D2C PRO 属性
固定宽度 / 固定高度	none
适应内容-水平	hug-x
适应内容-垂直	hug-y
充满容器-水平	fill-x
充满容器-重置	fill-y
换行	wrap

json

"flex": {
  "none": "flex-none",
  "hug-x": "flex-auto",
  "hug-y": "flex-auto",
  "fill-x": "flex-1",
  "fill-y": "self-stretch",
  "wrap": "flex-wrap"
}

justify-content

key: flex-start | center | flex-end | space-between

画布属性	D2C PRO 属性
左上对齐	flex-start
顶部居中	center
右上对齐	flex-end
水平分布	space-between

json

"justify-content": {
  "flex-start": "start",
  "center": "center",
  "flex-end": "end",
  "space-between": "between"
}

align-items

key: flex-start | center | flex-end

画布属性	D2C PRO 属性
左上对齐	flex-start
左中对齐	center
左下对齐	flex-end

json

"align-items": {
  "flex-start": "start",
  "center": "center",
  "flex-end": "end"
}

TIP

如果你的设计稿使用的是 Align center 属性，解析程序会自动帮你写上 justify-content 和 align-items 中 center 所映射的样式名称。如：class="justify-center items-center"

flex-direction

key: row | column

画布属性	D2C PRO 属性
垂直布局	row
水平布局	column

json

"flex-direction": {
  "row": "row",
  "column": "col"
}

gap

key: 数值

画布属性	D2C PRO 属性
间距	gap
行间距	row-gap
水平间距	column-gap

json

"gap": {
  "0": "0",
  "1": "px",
  "2": "0.5",
  "4": "1",
  "6": "1.5",
  "8": "2",
  "10": "2.5",
  "12": "3",
  "14": "3.5",
  "16": "4",
  "20": "5",
  "24": "6",
  "28": "7",
  "32": "8",
  "36": "9",
  "40": "10",
  // ......
}

这将根据 Gap 样式解析器的前缀来输出如：gap-0 gap-x-0 gap-y-0 这样的样式名，依次类推。

font-family

字体样式是否能正常显示，取决于用户设备是否安装了相应的字体。如果没有，浏览器会尝试使用备用字体或默认字体来显示文本。因此，为了确保字体样式的一致性和准确性，建议在使用特定字体样式时，在 CSS 文件中提前设置并引入相对应的字体，然后通过 mappings 选项来映射。

key: 字体名称

你的CSS文件

scss

@font-face {
  font-family: "poppins";
  src: url("yourPath/poppins.ttc");
}
.font-poppins {
  font-family: "poppins";
}

映射表配置

json

"font-family": {
  "Poppins": "font-poppins"
},

如果你的文字图层使用了字体映射表里的字体的话，会输出如 class="font-poppins" 这样的样式。

TIP

系统默认的字体族不用在此定义。并且你还可以在 font-family 解析程序中设置过滤系统默认字体。因为在通常情况下，我们不需要给每个文字节点都声明 font-family 样式。

color

同 css 属性一样，color 属性在这里仅作为文本填充来使用。它用于映射你在设计稿中定义的文字样式。下面是一个示例：

key: 变量名称 或 代码语法

提示

如果你没有为你的设计系统的变量设置 代码语法，解析程序会自动读取你的样式名称作为 key

json

"color": {
  "text-regular": "regular",
  "text-secondary": "secondary",
  "text-light": "light",
  "text-lightest": "lightest",
  "text-title": "title",
  "text-link": "link",
  "text-hover": "hover",
  "text-active": "active",
  "text-inverse": "inverse"
}

这样做的好处是，设计稿的样式和前端开发的样式名哪怕不一致，也会被关联映射。例如设计师们通常喜欢这样命名：

json

"color": {
  "neutral-100": "text-regular",
  "neutral-200": "text-secondary",
  "neutral-300": "text-light",
  "neutral-400": "text-lightest"
}

尽管在调色板使用这样的命名方式是可行的，但它在前端中并不符合语义化命名的原则。因此，你可以选择将它们映射到相应的语义化类名上。

WARNING

所以在本文的配置中，所有有关颜色的样式，都没有按照 Tailwind 默认提供的命名格式。同时 Tailwind 也提出了命名修改建议，你可以参考 Tailwind CSS 官方文档。

heading

我们建议你在你的设计系统中定义 heading 样式，这样它能够精准的被标识是否使用 h1 - h6 标签。以保障生成的代码更加符合 W3C 规范。

key: 变量名称 或 代码语法

json

"heading": {
  "heading1": "h1",
  "heading2": "h2",
  "heading3": "h3",
  "heading4": "h4",
  "heading5": "h5",
  "heading6": "h6"
}

font-size

根据文字的尺寸来映射 Class name

key: 文本尺寸

json

"font-size": {
  "12": "xs",
  "14": "sm",
  "16": "base",
  "18": "lg",
  "20": "xl",
  "24": "2xl",
  "30": "3xl",
  "36": "4xl",
  "48": "5xl",
  "60": "6xl",
  "72": "7xl",
  "96": "8xl",
  "128": "9xl",
}

font-weight

根据文本的重量来映射 Class name

key: 文本重量

json

"font-weight": {
  "100": "thin",
  "200": "extralight",
  "300": "light",
  "400": "normal",
  "500": "medium",
  "600": "semibold",
  "700": "bold",
  "800": "extrabold",
  "900": "black"
}

text-align

根据文本对其的方式来映射 Class name

key: left | center | right | justify

画布属性	D2C PRO 属性
左对齐	left
居中对齐	center
右对齐	right
两端对齐	justify

json

"text-align": {
  "left": "left",
  "center": "center",
  "right": "right",
  "justify": "justify"
}

letter-spacing

letter-spacing 属性可以映射设计稿的 字间距 样式。需要注意的是，画布中的字间距样式可以输入 px 或 %。所以在编写映射配置时，也要加上对应的单位。

key: 数值

json

"letter-spacing": {
  "0": "normal",
  "-5%": "tighter",
  "-2.5%": "tight",
  "2.5%": "wide",
  "5%": "wider",
  "10%": "widest"
}

line-height

line-height 属性，同字间距属性一样。在画布中可以输入 px 或 %。所以在编写映射配置时，也要加上对应的单位。

key: 数值

json

"line-height": {
  "12px": "3",
  "16px": "4",
  "20px": "5",
  "24px": "6",
  "28px": "7",
  "32px": "8",
  "36px": "9",
  "40px": "10",
  "100%": "none",
  "125%": "tight",
  "137.5%": "snug",
  "150%": "normal",
  "162.5%": "relaxed",
  "200%": "loose"
},

padding

padding 对应画布中的 边距 样式. 你可以在 padding 的样式解析器中设置它的前缀，让解析器可以根据四个边输出不同的类名。

direction key: padding | padding-top | padding-left | padding-right | padding-bottom | padding-x | padding-y
size key: 数值

json

"padding": {
  "0": "0",
  "2": "0.5",
  "4": "1",
  "6": "1.5",
  "8": "2",
  "10": "2.5",
  "12": "3",
  "14": "3.5",
  "16": "4",
  // ......
}

如果你将一个图层节点的 padding top 设置为 16px 的话，它将输出 pt-4。或者如果你将一个图层节点的 padding bottom 也设置为 16px 的话，它将输出 py-4。

background

Background 属性，对应画布中的 填充 样式。它和 color 属性一样，是用于映射你在设计稿中自定义的填充样式。

key: 变量名称 或 样式名称

json

"background": {
  "bg-body": "body",
  "bg-content": "content",
  "bg-light": "light",
  "bg-popup": "popup",
  "bg-element": "element",
  "bg-hover": "hover",
  "bg-active": "active",
  "bg-header": "header",
  "bg-transparent": "transparent"
}

我们熟知文本的样式是写在 color: 属性上的，而背景颜色是写在 background-color: 属性上，这两个属性并不通用。假如将画布的样式填充到某个 Frame 或者 Shape 节点的话，它将输出 background-color: var(--text-primary)。所以你应该为你的前端项目，提前准备好 Css Variable。DSM 也可以帮你将样式导出为 Css Variable。

border-color

color key: 样式名称

json

"border": {
  "border-regular": "regular",
  "border-light": "light",
  "border-dark": "dark",
  "border-deepdark": "deepdark",
  "border-transparent": "transparent"
}

border-width

key: 数值

json

"border-width": {
  "0": "0",
  "1": "1",
  "2": "2",
  "4": "4",
  "8": "8"
}

border-style

key: solid | dashed | dotted

json

"border-style": {
  "solid": "border-solid",
  "dashed": "border-dashed",
  "dotted": "border-dotted"
}

如果你要输出一个只有顶部为 4px 虚线边框的样式。则会得到 class="border-t-4 border-dashed border-regular"

border color 的属性如同 background color 一样，如果没有映射对应的样式，则输出 style 属性。就像格式说明中提到的一样.

radius

radius 属性，对应画布中的 圆角 样式。

key: 数值

json

"radius": {
  "0": "none",
  "2": "sm",
  "4": "default", // 如果它是默认值，设置为 default
  "6": "md",
  "8": "lg",
  "12": "xl",
  "16": "2xl",
  "24": "3xl",
  "9999": "full"
}

如上面代表高亮所示，如果你希望像 taiwind 那样，仅输出一个 rounded 的样式，而不是 rounded-default。你可以将它映射到 default 上。这样一来，设计稿中如果选择了 4px 的边框，则会直接输出 rounded。

opacity

Opacity 属性，对应画布中的图层 透明度 样式。而不是颜色的透明度。

key: 数值

json

"opacity": {
  "0": "0",
  "0.05": "5",
  "0.1": "10",
  "0.15": "15",
  "0.2": "20",
  "0.25": "25",
  "0.3": "30",
  "0.35": "35",
  "0.4": "40",
  "0.45": "45",
  "0.5": "50",
  "0.55": "55",
  "0.6": "60",
  "0.65": "65",
  "0.7": "70",
  "0.75": "75",
  "0.8": "80",
  "0.85": "85",
  "0.9": "90",
  "0.95": "95",
  "1": "100"
},

box-shadow

Box shadow 同 color 一样，它用于映射你设计稿中定义的阴影样式。

json

"box-shadow": {
  "shadow-none": "none",
  "shadow-sm": "sm",
  "shadow": "default",
  "shadow-md": "md",
  "shadow-lg": "lg",
  "shadow-xl": "xl",
  "shadow-2xl": "2xl"
}

position

Position 属性能够映射画布中的 约束布局 样式，

position

json

"position": {
  "position-type": {
    "fixed": "fixed",
    "relative": "relative",
    "absolute": "absolute",
    "sticky": "sticky"
  },
  "placement": {
    "top": {
      "0": "0"
    },
    "bottom": {
      "0": "0"
    },
    "left": {
      "0": "0"
    },
    "right": {
      "0": "0"
    }
  }
}

还能够根据你设计稿选择的值，来决定 top, right, bottom, left 4个属性。请参考样式解析器

overflow

Overflow 用于映射画布中的 裁剪超出内容 属性。当你的容器选择裁切超出的部分的时候，会被加上 hidden 所映射的 Class name。

json

"overflow": {
  "hidden": "overflow-hidden"
}

样式映射 ​

格式说明 ​

关于类名的前缀设置 ​

width ​

min-width ​

max-width ​

height ​

min-height ​

max-height ​

display ​

flex ​

justify-content ​

align-items ​

flex-direction ​

gap ​

font-family ​

你的CSS文件 ​

映射表配置 ​

color ​

heading ​

font-size ​

font-weight ​

text-align ​

letter-spacing ​

line-height ​

padding ​

background ​

border-color ​

border-width ​

border-style ​

radius ​

opacity ​

box-shadow ​

position ​

overflow ​

样式映射

格式说明

关于类名的前缀设置

width

min-width

max-width

height

min-height

max-height

display

flex

justify-content

align-items

flex-direction

gap

font-family

你的CSS文件

映射表配置

color

heading

font-size

font-weight

text-align

letter-spacing

line-height

padding

background

border-color

border-width

border-style

radius

opacity

box-shadow

position

overflow