编辑样式
编辑样式
我们现在支持编辑规则里的样式了!
- 选中您想编辑的节点;
- 在您想编辑的规则里,找到编辑按钮(铅笔图标),点击;
- 修改或插入新的样式;
- 点击保存,即可完成更新;
- 新样式即刻生效,您立刻就能看到效果。
新建规则
通常来说,我们生成代码时,会尽量让多个节点共享同样的规则,以减少最终生成的 CSS 数量。 所以如果您需要微调某个节点,最好给它添加新的样式规则:
- 点击上方的“添加新规则”按钮即可打开样式编辑器;
- 输入所需的规则内容,点击“保存”即可生效。
关联规则
当前节点可以关联已存在的规则,您只需在“关联已有规则”下拉框⾥找到⽬标规则, 选中立即关联。
从当前节点删除样式(取消关联)
因为规则是节点间共享的,所以我们认为您最好不要直接删掉某个规则,而是将其与当前节点取消关联。
- 选中需要取消关联的节点;
- 在您不想要的规则里,点击删除按钮(垃圾桶图标);
- 确认您的操作;
- 完成,视图将立刻更新。
清理掉无用样式
为了减少最终生成的 CSS 数量,您可以点击可以这个按钮,清理掉没有关联到任何节点的样式。
其它注意事项
- 每次只能编辑一个节点,但是规则里的样式可能会影响所有关联此规则的节点
- 想必您应该知道,CSS 规则存在优先级,我们的界面也是按照优先级排序的,靠上的规则优先级更高
- 全局样式规则,如
flex-row
等,不可编辑 - 我们会不断优化此功能,敬请期待