Конвертер CSS в SCSS и обратно

Вложенность переставляет правила, и это опасно

Главная беда перевода в SCSS не в синтаксисе. Когда правило .a .b уезжает внутрь .a, оно меняет своё место в файле. Если между ними стояло третье правило, задающее то же свойство, побеждать после перевода будет уже другое. Файл выглядит прежним, а страница рисуется иначе, и найти такую поломку тяжело.

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

Результат сверяется с вашим исходником

Собранный SCSS мы разворачиваем обратно в плоский CSS и сличаем с тем, что вы прислали. Совпасть должны и набор объявлений, и порядок внутри каждого свойства. Сошлось — так и написано, с числом объявлений. Не сошлось — откатываемся на заведомо безопасный вид, где к родителю уходят только соседние правила, и сверяем снова. Прятать расхождение мы не станем: оно показано на странице.

Имена переменных по смыслу

Повторяющиеся значения уезжают в переменные, но не под именами вида $color_1: такое всё равно переименовывать руками, и работа сделана зря. Цвет получает имя ближайшего к нему цвета, а размер — имя по свойству, в котором стоит. Отступ в 16 пикселей становится $space-16, радиус — $radius-8. Ближайший цвет ищется в пространстве, где расстояние совпадает с воспринимаемой разницей, иначе тёмно-синий регулярно объявляется чёрным.

Что понимает вложение

Потомки, прямые потомки и соседи, состояния через &:hover, дополнительные классы и атрибуты, записи БЭМ: .card__title становится &__title внутри .card. Похожие имена классов при этом не склеиваются: .cardio не уйдёт внутрь .card. Глубже четырёх уровней не вкладываем — такой файл перестаёт читаться.

Обратное направление

SCSS собирается в CSS по-настоящему: переменные, вложенность, примеси и функции. Есть переключатель сжатого вида для боевого сайта. Чего мы сделать не можем, о том говорим прямо: подключения @use и @import из соседних файлов недоступны, потому что на странице есть только вставленный текст.

Что рядом

Цвета для новой палитры удобно снимать палитрой из изображения, перевести один цвет между HEX, RGB и HSL поможет код цвета HTML, а проверить готовую разметку — проверка валидности HTML.