Style Master

快速批量重命名共享样式

如需按照规范修改整个项目共享样式名称,将面临无尽的点击和手动重命名。使用插件可以一次性重命名全部或部分共享样式,借助正则表达式的强大功能,甚至可完全重新设计命名层次结构,可能性是无限的

安装

  1. 下载并解压 Style Master.zip
  2. 双击 Style Master.sketchplugin 完成安装

使用

执行 Plugins > Style Master > Rename Text Styles 或 Rename Layer Styles 弹出对话框

对话框的左侧控制重命名过程,右侧显示重命名样式前后的实时预览。预览列大小适配最长样式名称的宽度(加上一些额外的空间)并且窗口的大小随之变化。你可以调整窗口大小,但预览列的宽度不会改变

查找字段 / 选项

在查找字段中输入需要检索的文本,默认情况下查找区分大小写,如果想做大小写不敏感的查找,请勾选查找字段下 "忽略大小写",在查找字段中输入文本时,预览会动态更新以指示哪些样式名称匹配

通过勾选查找字段下 "正则表达式",可在查找字段中指定任何有效的 Javascript 正则表达式,并在替换字段中使用特殊的替换语法。这使你可以对样式名称进行非常复杂的操作,否则将非常繁琐。有关使用正则表达式的示例,请参阅 下文 Cookbook 部分

注:如果正则表达式无效(例如不匹配的圆括号)则显示为红色

替换字段

在替换字段中输入的文本将替换(如果为空即为删除)由查找字段匹配的样式名称部分。一个给定名称中匹配文本的所有匹配项将被替换。例如:简单搜索 Sm 替换为 Lg 会将 Smile / Center / Sm 重命名为 Agile / Center / Sm 这种情况下,使用正则表达式可确保只匹配样式名称的某部分

注意:如果替换字段为空,并且当前的查找与整个样式名称匹配,那么在执行重命名时,这些样式将不会被包括在内,而且它们不包含在重命名计数中。这些不可重命名的样式 在预览的 After 列中显示

预览信息 / 选项

查找替换 字段下方是与预览相关的项目,下方首先显示被替换样式数 / 总样式数

只显示匹配的样式

当此选项关闭时,预览显示所有样式。当试图找出要查找的内容时,此选项变得非常有用。在 查找 字段中输入内容时,匹配样式在预览的 Before 列中以粗体显示

正如上图片中展示的:Dark 实际上匹配了 33 个样式,但是只有前 5 个是可见的,因剩余的 28 个样式在样式列表下方。而勾选 仅显示匹配样式 选项启用时,预览中只显示匹配样式:

自动滚动到第一个匹配样式

启用此选项时(默认),当在 查找 字段中输入内容时,第一个匹配样式将滚动到预览的顶部,这样可以很容易地看出是否匹配正确的样式

但有时不希望预览在 查找 字段中输入时滚动。例如:试图将样式名称与长正则表达式匹配,并且必须滚动才能看到样式名称,在这种情况下,将 自动滚动到第一个匹配样式 选项关闭允许在输入时保持样式名称可见

预览

首次打开对话框时,对话框右侧的预览显示所有样式,按字母顺序排序(区分大小写)

查找 字段中输入内容时,匹配样式将在 Before 列中以粗体突出显示,并在 After 列中重命​​名样式。在 替换 字段中输入内容时,重命名的样式名称将实时更新

按钮

  • Cancel 关闭对话框而不作任何更改
  • Apply 重命名匹配样式而不关闭对话框
  • Rename 重命名匹配的样式并关闭对话框

快捷键

  1. 切换 "忽略大小写" command + I
  2. 切换 "正则表达式" command + R
  3. 切换 "仅显示匹配样式" command + M
  4. 切换 "自动滚动到第一个匹配样式" command + S
  5. 执行重命名 command + shift + A
  6. 执行重命名并关闭对话框 enter
  7. 取消并关闭对话框 esc 或 command + . 或 command + W

Cookbook

以下可能是想要使用 Style Master 执行的一些典型任务,以及如何完成这些任务,并假设 正则表达式 选项都是打开的

改变 "/" 风格

你是否知道可以在 / 字符周围使用空格来创建文本样式、图层样式和图层名称的层次结构?它使得名称更容易阅读

查找 ([^ ])/([^ ]) 替换 $1 / $2

重新排列命名层次结构

假设正在使用一个模板来对以下层次结构中的文本样式进行排序

Size (Body, H1, etc.)
  Weight (Regular, Semibold, etc.)
    Alignment (Left, Center, Right)
      Color

但是你想对调 AlignmentWeight 的顺序

Size (Body, H1, etc.)
  Alignment (Left, Center, Right)
    Weight (Regular, Semibold, etc.)
      Color

查找 ^(.+?)\s*/\s*(.+?)\s*/\s*(.+?)\s*/\s*(.+) 替换 $1 / $3 / $2 / $4

折叠命名层次结构

假设具有与上例相同的层次结构,但不是重新排列 AlignmentWeight,而是要将 AlignmentColor 组合到一个单独的级别。所以不是 Body / Regular / Left / Black 你想要的 Body / Regular / Left - Black 如果必须用几十个样式手动完成这个任务,那将是一个令人心碎的任务

正则表达式只需查找 ^(.+?)\s*/\s*(.+?)\s*/\s*(.+?)\s*/\s*(.+) 替换 $1 / $2 / $3 - $4

扩展命名层次结构

这与折叠命名层次结构相反,你有 Body / Regular / Left - Black 但想要 Body / Regular / Left / Black

只需查找 - ([^-]+)$ 替换 / $1

基本信息

  • 收录版本 1.0.1
  • 更新时间 5年前
  • 更新日志 适配 Sketch 50.x