не знаю что там и как можно еще по другому верстать, но я делаю так:
увидел проблему, нажал в бравзере F12, нашел нужный стиль. Подкрутил значения. Причем "подкрутил" (стрелка вверх/вниз), а не переписываю цифрами - моментально вижу как все подгоняется. Что быстрее может быть? Остается значения только сохранить. Но и на тот случай есть решения готовое "сохранить как" и заменить CSS, хотя я так не делаю, не сбиваю свое форматирование, лучше переписать.

Теперь зайдем с другой стороны. Сайт не мой. Я не могу сделать шаг влево или шаг вправо "а может так будет лучше". Есть заказчик и я должен сделать все как мне дизайнер дал на макете. Нашел отличия. Захожу через F12. Увидел класс или инендификатор и написана строка №138. Я беру в СSS нажимаю Ctrl+G [138] и я уже готов это исправить. В случает с SCSS метка №138 это совсем не то место в SCSS. Поиск CTRL+F сразу результата не даст, поскольку .grid .btn.active img:hover это легкая комбинация для CSS, а в SCSS мне нужно искать .grid{ потом глазами искать .btn{ &.active img{ &:hover.

В чем секрет ускорения работы SCSS ? Может я его не вижу?
Препроцессор всегда сохраняет новую версию прямо в CSS как только я делаю любые изменения и в SCSS, но при этом я не могу адекватно посмотреть в сам CSS, поскольку зачастую сразу файл не отобразит реальной картины. PHPStrom кеширует файлы. Если кеширования отключить, то начнутся большие тормоза при написании кода. Так как парсер учитывая все взаимосвязи пытается чем то мне помочь, дать подсказку, подчеркнуть ошибку. И кеш помагает редактору, так как в нем все готовые решения уже есть для меня. А если я отключаю кеш, то хард моргает наполную в поисках чтобы облегчить мне написания кода. И что я делаю, чтоб увидеть оригинал CSS? Я вношу любое изменение и сохраняю, а редактор извещает, что файл уже был изменен и предлогает загрузить последнюю версию. А по другому у меня не получается открыть нову версию файла. Сто раз закрывай/открывай - показывает из кеша последнюю версию. Если только редактор закрыть/открыть, то обновится. В итоге что?

Ну окей. А почему только для CSS такая нужда в препроцессоре? Для макета HTML страницы разве не нужно было ?
Тоже нужно. Вот есть разные блоки. Один из них grid. В типо таблице все блоки одинаковы, только разные надписи и картинки, и цена может быть разной. Когда я делаю первый макет мне интересно посмотреть на все сразу. Значит мне бы не помешал там условный цикл, чтоб не копировать блоки например 6 или 9 раз. У фронденд разработчкика нет данных. Его задача скин сделать. А как без данных? Клею что попало, любые картинки чтоб показать как будет в итоге выглядеть. И копирую блоки например шесть раз. Если увидел, что нужно не просто отображать картинку, а соблюдать ее пропорции 4/3. Нужно еще обернуть два раза в DIV. И что получается... нужно все это проделывать с+5 еще таких блоков. К счастю есть множественный ввод (выделения), но сосредоточится на задачи становится сложнее. Ведь нужно переключаться на CSS, потом снова на HTML и снова делать этот мультиввод. Если такие умные, то почему и для HTML не придумали X HTML))) А для PHP - P PHP.

Переменные для быстрой замены цвета. Ну окей. А что мешает вначале собрать через запятую все классы и идентификаторы и присвоить им один цвет? Обычно я так и делаю. Это не моя проблема быстро цвет изменить. Мне за любые изменения деньги заплатят. Заказчик принял работу дизайнера, подписал уговор и все. Меня не *бет. Если хочет что-то изменить это уже "доработка". Моей вины в этом нет. Если бы я просто экспериментировал и игрался с цветами, шрифтами, размерами, то да SCSS для меня был бы очень важен! А по дизайну - это столько лишнего и ничего на мой взгляд улучшающего темпа работы и качества.

Я создал свой личныйпрепроцессор для PHP. (только без насмешек)
Он никак не вливает на написания кода PHP, но если написать вот такие теги:
/*[COPY=метка]*/
//Здесь любой PHP код
/*[/COPY=метка]*/
то такая метка запомнится в реестре. Если такая метка встретится еще где-то, пусть даже в другом файле, который также зарегистрирован, то эти метки будут связанные. /*{COPY=метка}*/ - а это метка инициализации. Это значит, если в ней ничего не было, то при обнаружении она будет переделана в /*[COPY=метка]*/...../*[/COPY=метка]*/. И как все это работает? Если я изменю внутри тега COPY PHP код, то препроцессор обновит этот кусочек кода везде, где эта метка когда либо встречалась при редактировании. Вещь очень удобная. Код всегда повторяется много раз. К примеру Add.php и Edit.php Add_ajax.php, Edit_ajax.php имеют много общего. Любые мелкие правки нужно делать везде. Если коснуться к дополнительным полям XFields, то они почти везде встречаются. Отключил препроцессор после одного момента. Всетаки затрудняет читабельность кода, если таких меток много. Нужно отдельно реальные от виртуальных PHP файлов держать. И они у меня лежали в "_www" папке и не выгружались на сервер. А реальные были без меток и без комментарий. Как-то выскочила ошибка при редактировании и я ее не заметил. Как оказалось - PHPStorm не дает на выполнение препроцессору файл, если тот с ошибкой. А в тот момент я ломал голову, почему не обновилось нигде значения в других файлах. В итоге отключил, а после уже не было желания включать. Нужно что-то по проще.

Нужно чтоб редактор умел еще более удобно группировать и чтоб можно было подписать блок и смотреть на него как на блок-схему. Если нужно - открыл блок, заглянул внутрь. Вот даже все накинулись на программирования классами и все только в пользу удобности кодочтения. Но если бы редактор удобно отображал сам по себе информацию и предлагал удобные подсказки, то и классы использовались бы только по назначению а не оборачивать все что только можно как по старинке в С++