Інструменти 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 синтаксис: $змінні, @mixin/@include, @extend, керування потоком @if/@for/@each, інтерполяцію #{$var} і однорядкові коментарі //. Зберігає структуру вкладених селекторів і правильно відступає вкладені блоки. Змініть вибір Відступ, щоб перемикатися між 2 пробілами, 4 пробілами або табуляцією.
Форматування LESS: Переформатовує таблиці стилів LESS з послідовними відступами. Обробляє весь специфічний для LESS синтаксис: @змінні, параметричні міксіни, охоронці (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. Якщо ваш CSS має плоску, повторювану структуру, цей інструмент допоможе переробити його на чистіший вкладений SCSS.
CSS → LESS: Перетворює стандартний CSS на синтаксис LESS з автоматичним рефакторингом вкладення. Той самий тип вкладення, що й у CSS→SCSS: виявляє повторювані шаблони батьківських елементів, селектори-нащадки та псевдокласи. Виносить повторювані власні властивості CSS у @змінні LESS. Результат — чистий, вкладений код LESS.
Каскад, специфічність і чому стилі конфліктують

Коли кілька правил стосуються одного елемента, перемагає специфічність: вбудовані стилі переважають ідентифікатори, ідентифікатори переважають класи, класи переважають селектори елементів, а порядок у джерелі розв'язує нічию. Прапорець !important перевизначає цю арифметику — і робить наступне перевизначення значно складнішим.

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