Skip to main content

编辑样式

编辑样式

我们现在支持编辑规则里的样式了!

  1. 选中您想编辑的节点;
  2. 在您想编辑的规则里,找到编辑按钮(铅笔图标),点击;
  3. 修改或插入新的样式;
  4. 点击保存,即可完成更新;
  5. 新样式即刻生效,您立刻就能看到效果。

新建规则

通常来说,我们生成代码时,会尽量让多个节点共享同样的规则,以减少最终生成的 CSS 数量。 所以如果您需要微调某个节点,最好给它添加新的样式规则:

code.fun CSS 编辑器:创建新规则

  1. 点击上方的“添加新规则”按钮即可打开样式编辑器;
  2. 输入所需的规则内容,点击“保存”即可生效。

关联规则

当前节点可以关联已存在的规则,您只需在“关联已有规则”下拉框⾥找到⽬标规则, 选中立即关联

code.fun CSS 编辑器:关联已有规则

从当前节点删除样式(取消关联)

因为规则是节点间共享的,所以我们认为您最好不要直接删掉某个规则,而是将其与当前节点取消关联。

code.fun CSS 编辑器:删除规则

  1. 选中需要取消关联的节点;
  2. 在您不想要的规则里,点击删除按钮(垃圾桶图标);
  3. 确认您的操作;
  4. 完成,视图将立刻更新。

清理掉无用样式

为了减少最终生成的 CSS 数量,您可以点击可以这个按钮,清理掉没有关联到任何节点的样式。

code.fun CSS 编辑器:删除规则

其它注意事项

  • 每次只能编辑一个节点,但是规则里的样式可能会影响所有关联此规则的节点
  • 想必您应该知道,CSS 规则存在优先级,我们的界面也是按照优先级排序的,靠上的规则优先级更高
  • 全局样式规则,如 flex-row 等,不可编辑
  • 我们会不断优化此功能,敬请期待