Инструменты CSS

Универсальный набор инструментов CSS: форматирование, минификация, проверка синтаксиса, компиляция SCSS/Sass и LESS в CSS и обратное преобразование CSS в SCSS или LESS.
Вся обработка выполняется локально в вашем браузере — ваши данные никуда не загружаются.
Режим:
Входной CSS / SCSS / LESS / SASS
Результат
Как пользоваться: вставьте ваш CSS/SCSS/LESS/SASS в левое поле, выберите режим и нажмите Обработать (или просто печатайте — обработка происходит при вводе).
Как работает каждый режим
Форматирование CSS: форматирует CSS с единообразными отступами (2/4 пробела или табуляция), по одному свойству в строке. Обрабатывает вложенные at-правила вроде @media, @keyframes, @supports. Сохраняет комментарии (и /* */, и однострочные). Переключайте селектор Отступ, чтобы выбрать 2 пробела, 4 пробела или табуляцию.
Минификация: удаляет все лишние пробелы, комментарии и избыточные символы, давая самый компактный CSS. Идеально для продакшена, чтобы уменьшить размер файла и трафик. Посмотрите строку статистики, чтобы увидеть степень сжатия.
Проверка: разбирает CSS и ищет синтаксические ошибки. Сообщает об ошибках разбора с точными номерами строки и столбца. Также показывает статистику: число правил, селекторов, объявлений и at-правил.
Форматирование SCSS: переформатирует таблицы стилей SCSS/Sass с единообразными отступами. Обрабатывает весь специфичный для SCSS синтаксис: $variables, @mixin/@include, @extend, управляющие конструкции @if/@for/@each, интерполяцию #{$var} и однострочные комментарии //. Сохраняет структуру вложенных селекторов и правильно выравнивает вложенные блоки. Переключайте селектор Отступ, чтобы выбрать 2 пробела, 4 пробела или табуляцию.
Форматирование LESS: переформатирует таблицы стилей LESS с единообразными отступами. Обрабатывает весь специфичный для LESS синтаксис: @variables, параметрические миксины, охранные условия (when), интерполяцию @{var}, слияние и однострочные комментарии //. Сохраняет структуру вложенных селекторов и правильно выравнивает вложенные блоки. Переключайте селектор Отступ, чтобы выбрать 2 пробела, 4 пробела или табуляцию.
SCSS → CSS: компилирует таблицы стилей SCSS/Sass в простой CSS с помощью официального компилятора Dart Sass (v1.102). Поддерживает переменные ($var), вложенность, миксины (@mixin, @include), функции, @extend, управляющие конструкции @if/@for/@each и современные модули Sass (@use, @forward). Компилятор Sass (~5.4 МБ) загружается по требованию при первом использовании этого режима.
LESS → CSS: компилирует таблицы стилей LESS в простой CSS. Поддерживает переменные (@var), вложенность, миксины, параметрические миксины, операции, функции, охранные условия и импорт (@import). Компилятор (~150 КБ) загружается по требованию при первом использовании этого режима.
SASS → CSS: компилирует синтаксис SASS с отступами (файлы .sass, без фигурных скобок и точек с запятой) в простой CSS с помощью Dart Sass. В SASS с отступами значимы пробелы вместо фигурных скобок, поэтому он лаконичнее. Тот же компилятор Dart Sass (~5.4 МБ) обрабатывает и SCSS, и SASS с отступами.
CSS → SCSS: преобразует стандартный CSS в синтаксис SCSS с автоматическим рефакторингом вложенности. Обнаруживает шаблоны в стиле BEM и переносит селекторы .parent-child во вложенные блоки &-child. Преобразует потомковые селекторы во вложенные правила, селекторы псевдоклассов в &:state, а повторяющиеся пользовательские свойства CSS выносит в SCSS-$variables. Если ваш CSS имеет плоскую, повторяющуюся структуру, этот инструмент поможет переписать его в более чистый вложенный SCSS.
CSS → LESS: преобразует стандартный CSS в синтаксис LESS с автоматическим рефакторингом вложенности. Тот же тип вложенности, что и CSS→SCSS: обнаруживает повторяющиеся шаблоны родителей, потомковые селекторы и псевдоклассы. Выносит повторяющиеся пользовательские свойства CSS в LESS-@variables. Результат — аккуратный вложенный код LESS.
Каскад, специфичность и почему стили конфликтуют

Когда несколько правил нацелены на один элемент, победителя определяет специфичность: встроенные стили побеждают id, id побеждают классы, классы побеждают селекторы элементов, а при равенстве решает порядок в источнике. Флаг !important переопределяет эту арифметику — и делает следующее переопределение ещё труднее.

Специфичность считается для каждого селектора отдельно, а не суммируется из контекста — более специфичное правило побеждает независимо от того, где в таблице стилей оно находится.