Как автоматизировать процесс переноса стилей из инспектора в браузере непосредственно в код?
Намного удобнее, особенно на больших проектах, где файлы стилей не всегда в идеальном состоянии менять стили в инспекторе кода в браузере и сразу смотреть изменения.
Но процесс переноса этих стилей в файл достаточно зануден.
Больше года назад когда начала знакомиться с фронтендом, слышала, что есть какое-то расширение, которое может перенести стили из браузера в файл css, где они изначально были записаны.
Кто-нибудь знает, что это за расширение?
Есть такое же, но для sass? (Такое вообще возможно реализовать?!)
Какими способами или скриптами Вы ускоряете верстку?
Делаете правки в инспекторе, и они сохраняются в CSS-файле.
Но так не надо работать. Подключите любой Livereload-плагин для редактора кода, сервер или настройте сборщик. Плагин проще + тот же SASS watch. Или Browsersync тот же самый, кстати.
Livereload плагины не решают мою проблему
Разумеется, я знаю о них и о сборщиках
Но если большой проект, много стилей.. нужно смотреть в каком они файле, лезть в файл и там их менять
Сомнительная скорость
За ссылку save-css-chrome-inspector спасибо
Ознакомлюсь с ним
wqertAnna, эм... нормальная скорость, или вы не знаете проект, над которым работаете, когда работаете? Да и поиск по проекту, горячие клавиши? Более того, для этого есть sourcemaps, чтобы сразу понять, в каком файле-исходнике нужный вам код. Никто 100 лет уже не ищет, откуда взялся какой-то там класс из исходников препроцессора.
В браузере править нормальный, большой или средний проект — плохая практика. Более того, теряете весь функционал вашего текстового редактора, если будете в браузере что-то там редактировать.
Вот я сейчас работаю в таком режиме с 1400+ файлами SASS в проекте. Использую только livereload и SASS watch. Внутри текстового редактора спокойно переключаюсь между файлами проекта, использую поиск на основе данных из sourcemaps. Времени это занимает очень мало.
Если это чужой проект, то "не быстро" это нормально.
Если это свой проект и в нем неудобно вносить правки в исходники, то решение не в том, чтобы править в браузере, а в изменении структуры/архитектуры и т.д. Возможно, вам поможет простое применение sourcemap.
С другой стороны, поиск про проекту и вы в нужном файле, не вижу проблемы.
Не подходит
Если проект большой, то сложно сориентироваться, в каком месте стили, особенно, когда стили одного блока в разных файлах
Поэтому и удобно их менять в браузере, потому что видно абсолютно все стили конкертного элемента.
wqertAnna, если вам по ходу работы часто приходится править стили в разных файлах, то что-то с вашей версткой не так. Так никто не верстает. Представьте как вы меняете через браузер какой-то глобальный стиль примененный к элементу и у вас едет верстка в другом месте.
Антон Спирин, если работаешь с одним блоком, то всё в одном файле, а если правишь страницу, на которой много шаблонов компонентов и у каждого свой файл стилей
Простой
Средний
