任何方式来保存CSS diff而不是保存整个样式表在Chrome开发工具？ [英] Any way to save a CSS diff rather than save the entire stylesheet in Chrome Dev Tools?

问题描述

我的问题与Chrome开发人员工具有关。

这是我的日常工作流程：我编辑Shopify主题。我在Chrome开发人员工具中使用DOM检查器编辑页面上的CSS。对于每个微小的编辑我很高兴，我需要点击样式表，复制和粘贴我更新的整个CSS规则，粘贴结果的CSS规则在主题样式表的底部，注释 / *添加Caroline * / ，删除CSS属性我没有编辑，并重复为每个CSS位我编辑。

世界，我会继续编辑所有的CSS我需要编辑几个元素。然后，我会转到Sources标签，右键单击并选择本地修改，然后代替这个无用的事情：

我会得到CSS我可以复制和粘贴在我的样式表下面我的 / *由Caroline * / 添加。

我不想编辑样式表液体标签和Sassy CSS由服务器解析。我想只添加在混合样式表的底部无论CSS diff我在实时编辑CSS时提出。

这是否有扩展名？

解决方案

Chrome DevTools允许您通过定义工作区保存（覆盖）整个样式表， a>。支持Sass，但只将您更改的样式作为一组单独的规则。

我怀疑问题是顺序的规则事项。添加到样式表底部的规则可能与放置在页面上方的相同规则不具有相同的效果。由于这些工具的目标是提交编辑，所以页面将看起来像你看到的，只保存差异到底部可能会创建新的问题或孤立一些样式。换句话说，你可能（现在你可能现在）发现你添加更改的规则到样式表的底部，然后需要调试不能正常工作的规则，添加更多的规则来覆盖其他规则。 / p>

我知道，这不是你的问题的回答，而是解释为什么这样的事情可能不存在。

My question relates to Chrome Developer Tools.

This is my workflow day in day out: I edit Shopify themes. I edit the CSS on a page using the DOM inspector in Chrome Developer Tools. For each tiny edit I am happy with, I need to click on the stylesheet, copy and paste the entire CSS rule that I updated, paste the resulting CSS rule at the bottom of the theme stylesheet after the comment /* Added by Caroline */, remove the CSS properties I did not edit, and repeat for every CSS bit I edit.

In an ideal world, I would go ahead and edit all the CSS I need to edit for several elements. Then I would go to Sources tab, right-click and select "Local Modifications" and then instead of this useless thing:

I would get CSS I can copy and paste at the bottom of my stylesheet below my /* Added by Caroline */.

I don't want to edit a stylesheet, which contains Liquid tags and Sassy CSS to be parsed by the server anyway. I want to only add at the bottom of that hybrid stylesheet whatever CSS diff I have come up with while live editing the CSS. That's it.

Is there an extension for this?

解决方案

Chrome DevTools lets you save (overwrite) the entire stylesheet by defining a workspace. Sass is supported, but bringing only the styles you changed as a separate set of rules is not.

I suspect the issue is that the order of the rules matters. A rule added to the bottom of the stylesheet may not have the same effect as the same rule placed further up the page. Since the goal of these tools is to commit the edits so the page will look exactly as you see it, saving just the diffs to the bottom might create new issues or orphan some styles. In other words, you may (and you probably do now) find that you add the changed rules to the bottom of your style sheet, then need to debug the rules that aren't working properly, adding more rules to override other rules.

I know, that's not really an answer to your question, but an explanation of why such a thing may not exist.

这篇关于任何方式来保存CSS diff而不是保存整个样式表在Chrome开发工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！