¿Alguna forma de guardar una diferencia de CSS en lugar de guardar la hoja de estilos completa en Chrome Dev Tools?

google-chrome-devtools

Question

Mi pregunta se relaciona con Chrome Developer Tools.

Este es mi flujo de trabajo día a día: edito los temas de Shopify. Edito el CSS en una página utilizando el inspector de DOM en Chrome Developer Tools. Para cada edición pequeña con la que estoy contento, debo hacer clic en la hoja de estilo, copiar y pegar la regla CSS completa que actualicé, pegar la regla CSS resultante en la parte inferior de la hoja de estilo del tema después del comentario /* Added by Caroline */ , elimine las propiedades CSS que no edité y repita para cada bit CSS que edite.

En un mundo ideal, seguiría y editaría todos los CSS que necesito editar para varios elementos . Luego iría a la pestaña Fuentes, hacer clic con el botón derecho y seleccionar "Modificaciones locales" y luego, en lugar de esto, sería inútil:

Me gustaría obtener CSS. Puedo copiar y pegar en la parte inferior de mi hoja de estilos debajo de mi /* Added by Caroline */ .

No quiero editar una hoja de estilo, que contiene etiquetas Liquid y CSS de Sassy para que las analice el servidor de todos modos. Solo quiero agregar en la parte inferior de esa hoja de estilo híbrida cualquier diferencia de CSS que haya encontrado mientras edito el CSS en vivo. Eso es.

¿Hay una extensión para esto?

Answer 1

Chrome DevTools le permite guardar (sobrescribir) la hoja de estilo completa definiendo un espacio de trabajo . Sass es compatible, pero no solo trae los estilos que ha cambiado como un conjunto separado de reglas.

Sospecho que el problema es que el orden de las reglas importa. Una regla agregada al final de la hoja de estilo puede no tener el mismo efecto que la misma regla colocada más arriba en la página. Dado que el objetivo de estas herramientas es realizar las ediciones para que la página se vea exactamente como la ve, guardar solo las diferencias en la parte inferior puede crear nuevos problemas o dejar algunos estilos huérfanos. En otras palabras, puede (y probablemente ahora lo encuentre) agregar las reglas modificadas al final de su hoja de estilo, luego debe depurar las reglas que no funcionan correctamente y agregar más reglas para anular otras reglas.

Lo sé, esa no es realmente una respuesta a tu pregunta, sino una explicación de por qué tal cosa puede no existir.