任何方式來保存CSS差異，而不是將整個樣式表保存在Chrome開發工具中？

Question

我的問題涉及到Chrome開發者工具。

這是我日常工作的一天：我編輯Shopify主題。我使用Chrome開發人員工具中的DOM檢查器在頁面上編輯CSS。對於我很滿意的每一個微小編輯，我需要點擊樣式表，複製並粘貼我更新的整個CSS規則，在註釋/* Added by Caroline */後面粘貼主題樣式表底部的結果CSS規則，刪除CSS屬性I沒有編輯，並重復我編輯的每一個CSS位。

在理想的世界中，我會繼續編輯我需要編輯的幾個元素的所有CSS。然後我會去來源選項卡，單擊鼠標右鍵，選擇「本地修改」，然後，而不是這個沒用的東西：

我會得到CSS我可以在我下面的樣式表的底部，複製和粘貼我的/* Added by Caroline */。

我不想編輯樣式表，其中包含Liquid標籤和Sassy CSS，無論如何都要由服務器解析。我只想在該混合樣式表的底部添加我在編輯CSS時遇到的任何CSS差異。而已。

這是否有擴展名？

Answer 1

Chrome DevTools允許您通過defining a workspace保存（覆蓋）整個樣式表。 Sass支持，但只將您更改的樣式作爲一組單獨的規則使用。

我懷疑問題是規則的訂單很重要。添加到樣式表底部的規則可能不具有相同的效果，因爲相同的規則放置在頁面的上方。由於這些工具的目標是提交編輯，因此頁面看起來與您看到的完全一樣，只是將差異保存到底部可能會產生新問題或孤立某些樣式。換句話說，你可能（現在你可能現在已經發現）你將更改後的規則添加到樣式表的底部，然後需要調試不能正常工作的規則，添加更多的規則來覆蓋其他規則。

我知道，這不是一個真正的答案你的問題，但解釋爲什麼這樣的事情可能不存在。