Прощай SASS, добро пожаловать обратно в родной CSS

Sass зарекомендовал себя как мощный локально устанавливаемый препроцессор, который более десяти лет составлял основу многих проектов. Это позволяет эффективно создавать масштабируемые и стабильные пакеты CSS. Даже сегодня Sass считается чрезвычайно мощным инструментом. Тем не менее, по мере того, как мы вступаем в 2024 год, нельзя отрицать, что CSS стремительно развивается. Функции, которые когда-то были уникальными для Sass, теперь встроены в CSS, включая переменные и последнюю новинку: вложенность CSS.

Переменные

:root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; }

Определение переменных долгое время считалось уникальной особенностью SASS, позволяющей централизованно управлять многими свойствами, чего долгое время не хватало в CSS. Однако сегодня переменные также можно определять в CSS способом, аналогичным Sass. Существенным отличием, однако, является то, что переменные Sass существуют исключительно в контексте препроцессора, в то время как переменные CSS могут использоваться в браузере и даже динамически перезаписываться с помощью JavaScript.

CSS Nesting

.blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } }

Возможность определять правила стиля одного элемента внутри другого значительно упрощает написание CSS. Вместо многократного использования одного и того же селектора для подчиненных элементов или псевдо-селекторов вложенность позволяет группировать их в родительском селекторе. Этот метод позволяет создать понятную, иерархически структурированную и, следовательно, более эффективную кодовую базу.

Благодаря поддержке браузером более 84% вложенности CSS и 86% селектора вложенности, этот метод становится все более доступным.

Псевдокласс: is

:is(selector1, selector2, selector3) { /* styles */ }

Псевдокласс: is революционизирует концепцию селектора, принимая список селекторов и стилизуя все элементы, соответствующие любому из этих селекторов. Это значительно облегчает выбор и стилизацию элементов в DOM.

Вместо длинных списков выбора вы можете использовать: is(), чтобы улучшить читаемость и избежать длинного выбора.

Псевдокласс: has()

.hero:has(.hero-button) { background-color: var(--accent-50); }

Псевдокласс CSS: has() предоставляет мощный способ выбора элемента на основе его потомков, аналогичный применению условных стилей.

Запросы к контейнерам

.component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } }

.parent-container { container-type: inline-size; .headline { font-size: 2rem; } @container (width >= 720px) { .headline { font-size: 2.5rem; } } }

Контейнерные запросы считаются наиболее значительным нововведением в веб-дизайне со времен CSS3. Они расширяют концепцию адаптивного дизайна, позволяя настраивать элементы в зависимости от размера их контейнеров. Эта технология позволяет дизайну элемента динамически изменяться в зависимости от контекста, что приводит к более гибкому и адаптивному дизайну.

Если у контейнера есть переменная тема: темная, добавьте следующий CSS.

Каскадные слои

@layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } }

С каскадными слоями мы можем избежать вложенности классов, идентификаторов и т. д. для большей специфичности назначаем наш собственный слой (layer). Используя правило @layer at и многоуровневый @imports, мы можем создавать наши собственные каскадные уровни — от стилей с низким приоритетом, таких как сброс настроек и значения по умолчанию, через темы, фреймворки и системы проектирования, до стилей с наивысшим приоритетом, таких как компоненты, утилиты и переопределения. Каскадные слои обеспечивают больший контроль.

Будущее Sass

Означает ли это, что Sass устарел? Нисколько. Микшеры и функции, такие как преобразование пикселей в rem, остаются незаменимыми преимуществами Sass. Тем не менее, решение отказаться от Sass в проектах — имеет место быть. Вместо этого советуют использовать предопределенные блоки кода и пакеты в редакторе Sublime, что значительно улучшает рабочий процесс.

Прощайте, SASS?

Я искренне верю, что в 2024 году преимущества Sass, включая проблемы с установкой, использованием и компиляцией, больше не оправдывают его использования. Масштабируемость и удобство в использовании современного CSS позволяют обойтись без дополнительных инструментов.