CSS ↔ SCSS Converter
Конвертируйте CSS в SCSS с вложенностью и переменными, или SCSS обратно в плоский CSS
CSS
SCSS
CSS → SCSS
- •Группировка вложенных селекторов (.nav .item → .nav { .item { } })
- •Обнаружение &:hover, &::before паттернов
- •Извлечение повторяющихся цветов в $переменные
- •Сохранение структуры @media-запросов
SCSS → CSS
- •Разворачивание вложенных селекторов в плоский CSS
- •Обработка & (parent selector)
- •Подстановка $переменных
- •@include сохраняется как есть
О сервисе CSS ↔ SCSS Converter
Конвертируйте CSS в SCSS и обратно. Инструмент группирует вложенные селекторы, извлекает переменные для цветов и разворачивает SCSS-синтаксис в плоский CSS. Бесплатно, без регистрации, работает прямо в браузере.
Часто задаваемые вопросы
SCSS — это расширение CSS с поддержкой переменных ($color), вложенных правил, миксинов и функций. SCSS компилируется в обычный CSS. Вложенность упрощает чтение стилей для компонентов, а переменные обеспечивают единообразие значений.
При конвертации SCSS → CSS миксины (@mixin, @include) сохраняются как есть, так как для их раскрытия нужна полная SCSS-компиляция. Переменные и вложенность обрабатываются корректно.
Инструмент анализирует все цветовые значения (HEX). Если цвет встречается 2+ раз, для него создаётся переменная $color-N в начале файла, а все вхождения заменяются на эту переменную.
Абсолютно. Конвертация происходит полностью в вашем браузере. Код не отправляется на сервер и не сохраняется. Можно безопасно вставлять любые стили.
Полезные статьи
Руководства и советы по теме
Связанные инструменты
Другие полезные сервисы reChecker