CSS Mixins нативно и ещё 4 фичи которые убивают Sass в 2026 году

Каждый год появляются статьи о том что «CSS убьёт Sass». Каждый год Sass выживал — потому что оставались вещи которые нативный CSS не умел: переменные (до Custom Properties), вложенность (до CSS Nesting), и последний бастион — миксины. В 2026 году этот бастион падает.

Chrome 146 получит нативные @mixin и @apply. Это не черновик и не экспериментальный флаг — это ожидаемый релиз. Разбираем что именно меняется.

@mixin и @apply — Sass без Sass

Синтаксис намеренно близок к тому с чем уже знакомы Sass-разработчики:

@mixin --center {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
@mixin --card-base {
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.1);
}
 
.hero {
  @apply --center;
  @apply --card-base;
  min-height: 100vh;
}

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

Главное что это даёт: паттерны можно шарить между компонентами без сборщика. Токены темы, утилитарные блоки, адаптивные паттерны — всё это теперь нативно.

Если твой проект держался на Sass только ради миксинов — с Chrome 146 можно начинать миграцию.

@scope — конец войн специфичности

Классическая боль: пишешь чистый селектор, он перебивается чем-то с большей специфичностью, добавляешь !important, кто-то добавляет !important поверх, таблица стилей превращается в минное поле.

@scope решает это структурно. Стили применяются только внутри заданной области — с намеренно низкой специфичностью:

@scope (.card) to (.card-footer) {
  :scope {
    border: 1px solid oklch(0 0 0 / 0.12);
    border-radius: 12px;
  }
 
  h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }
 
  p {
    color: oklch(40% 0 0);
  }
}

Конструкция to (.card-footer) — «пончик-скоуп». Стили применяются внутри .card но не проваливаются в .card-footer. Компонент стилизован, соседи не затронуты, специфичность предсказуема.

Поддержка: Chrome и Safari. Firefox — в активной разработке.

corner-shape — squircle без SVG

Долгое время «Apple-скруглённые» углы (squircle) в вебе требовали SVG-масок или JavaScript-расчётов. corner-shape делает это нативно:

.card {
  border-radius: 20px;
  corner-shape: squircle; /* superellipse — как у Apple */
}
 
.badge {
  corner-shape: notch; /* sci-fi вырез */
}
 
.button {
  corner-shape: bevel; /* прямой срез угла */
}

Доступные значения: round (дефолт), bevel, notch, scoop, squircle. Все корректно анимируются через transition.

Поддержка: Chrome Canary. Спецификация стабилизирована, rollout ожидается в первой половине 2026.

base-select — кастомный `<select>` наконец-то

Одна из старейших жалоб в фронтенде — невозможность нормально стилизовать <select>. Результат: тысячи кастомных дропдаунов на JavaScript которые теряют accessibility, ломаются на клавиатуре и раздувают бандл.

appearance: base-select решает это:

select {
  appearance: base-select;
}
 
select::picker(select) {
  border: 1px solid oklch(0 0 0 / 0.15);
  border-radius: 8px;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.1);
}
 
option:checked {
  background: oklch(60% 0.2 260);
  color: white;
}

Элемент остаётся нативным <select> со всеми его accessibility-свойствами. Кастомизация — через CSS. Библиотека дропдаунов больше не нужна.

Поддержка: Chrome и Edge. Safari и Firefox — в разработке.

Cross-document View Transitions — анимации между страницами

View Transitions раньше работали только внутри SPA — один документ, плавные переходы между состояниями. В 2026 это расширяется на MPA (Multi-Page Applications):

/* Работает для навигации между страницами одного origin */
@view-transition {
  navigation: auto;
}
 
::view-transition-old(root) {
  animation: fade-out 0.25s ease;
}
 
::view-transition-new(root) {
  animation: fade-in 0.25s ease;
}

Плавные переходы между страницами без JavaScript, без роутера, без SPA-архитектуры. Next.js App Router, Astro, любой MPA — всё это получает кинематографические переходы из коробки.

Поддержка: Chrome и Edge. Финализируется в других браузерах.

Паттерн года читается чётко: браузеры поглощают инструменты которые раньше требовали зависимостей. Нативные миксины убирают Sass. @scope убирает CSS Modules для изоляции. base-select убирает кастомные дропдауны. View Transitions убирают анимационные библиотеки.

Меньше node_modules. Быстрее загрузка. Чище архитектура.

22.03.2026