Любой способ сохранить разницу CSS, а не сохранять всю таблицу стилей в инструментах Chrome Dev?

Мой вопрос относится к инструментам разработчика Chrome.

Это мой рабочий день в день: я редактирую темы Shopify. Я редактирую CSS на странице с помощью инспектора DOM в инструментах разработчика Chrome. Для каждого маленького редактирования я доволен, мне нужно щелкнуть по таблице стилей, скопировать и вставить все правило CSS, которое я обновил, вставить результирующее правило CSS в нижней части таблицы стилей темы после комментария /* Added by Caroline */, удалить CSS свойства, которые я не редактировал, и повторяю для каждого редактируемого бита CSS.

В идеальном мире я бы пошел и отредактировал весь CSS, который мне нужен, чтобы отредактировать для нескольких элементов. Затем я перейду на вкладку "Источники", щелкните правой кнопкой мыши и выберите "Локальные изменения", а затем вместо этой бесполезной вещи:

Я бы получил CSS, который я могу скопировать и вставить в нижней части моей таблицы стилей ниже моего /* Added by Caroline */.

Я не хочу редактировать таблицу стилей, содержащую теги Liquid и Sassy CSS, которые в любом случае анализируются сервером. Я хочу только добавить в нижней части этой гибридной таблицы стилей, какую бы разницу CSS я не придумал, в то время как в реальном времени редактирование CSS. Что это.

Есть ли расширение для этого?

Ответ 1

Chrome DevTools позволяет сохранять (переписывать) всю таблицу стилей определение рабочей области. Sass поддерживается, но приносит только стили, которые вы изменили, поскольку отдельный набор правил не является.

Я подозреваю, что проблема в том, что порядок правил имеет значение. Правило, добавленное в нижнюю часть таблицы стилей, может не иметь того же эффекта, что и одно и то же правило, размещенное дальше страницы. Поскольку цель этих инструментов состоит в том, чтобы зафиксировать изменения, чтобы страница выглядела точно так, как вы ее видите, сохранение только различий в нижней части может создавать новые проблемы или сирота некоторых стилей. Другими словами, вы можете (и, вероятно, сейчас) найти, что вы добавили измененные правила в нижнюю часть вашей таблицы стилей, затем нужно отлаживать правила, которые не работают должным образом, добавляя больше правил для переопределения других правил.

Я знаю, что на самом деле это не ответ на ваш вопрос, а объяснение того, почему такая вещь может не существовать.