SASS `@at-root`

В этой статье объясняется директива SASS @at-root.

Мы шаг за шагом разберём всё: от базового использования @at-root до продвинутых примеров.

YouTube Video

О SASS @at-root

@at-root — это директива SASS, используемая для переноса вложенных селекторов или свойств из текущего уровня вложенности в родительскую область. Используя эту возможность, вы можете контролировать глубину вложенности и эффективнее генерировать нужный CSS.

Базовое использование @at-root

Вложенность в SASS делает код более читаемым, но слишком глубокая вложенность может привести к генерации нежелательного CSS. С помощью @at-root можно исключать отдельные блоки кода из структуры вложенности.

Базовый синтаксис

1@at-root {
2  // Code to be output at the parent (root) scope
3}

Пример использования

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

Скомпилированный CSS

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• Благодаря @at-root селектор .nav-item выводится вне .nav.

@at-root во вложенных селекторах

Даже при глубокой вложенности @at-root позволяет вынести отдельные селекторы на корневой уровень. Это позволяет получать предсказуемый CSS даже в сложных структурах.

Пример использования

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

Скомпилированный CSS

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• С помощью @at-root селектор .card-title выводится вне .card-header.

@at-root с аргументами

Указав аргументы, можно гибче управлять поведением @at-root.

Аргумент without

При использовании аргумента without вывод игнорирует указанные области. Иными словами, можно убрать родительские правила или медиазапросы.

Пример использования

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

Скомпилированный CSS

1.nav__item {
2  color: red;
3}

• В этом случае @at-root (without: media) исключает область медиазапроса, и .nav__item выводится на корневом уровне.

Аргумент with

Аргумент with оставляет в выводе только указанные области. Полезно, когда нужно вывести на корень, сохранив определённые области.

Пример использования

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

Скомпилированный CSS

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) переносит селектор на корневой уровень, сохраняя структуру медиазапроса.

Указание нескольких условий

Вы также можете указать несколько областей одновременно, разделив их пробелами.

Пример использования

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

Скомпилированный CSS

1.global-style {
2  color: green;
3}

• В этом примере исключаются и rule (обычные селекторы), и media (медиазапросы), поэтому .global-style не принадлежит никакой области и выводится полностью на корневом уровне. Это полезно, когда вы намеренно хотите определить глобальные стили даже внутри сложной вложенности.

Совмещение с медиазапросами

С помощью @at-root можно выносить стили на корневой уровень изнутри медиазапросов. Это позволяет задавать адаптивный дизайн на уровне компонентов.

Пример использования

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

Скомпилированный CSS

1.container-large {
2  width: 80%;
3}

• С помощью @at-root можно выводить стили корневого уровня и изнутри медиазапросов. Это упрощает определение независимых глобальных стилей для каждого брейкпоинта.

Сценарии использования @at-root

@at-root удобна, когда требуется вывести стили на корневом уровне при определённых условиях. Особенно полезна при работе с медиазапросами или стилями, зависящими от темы, внутри компонентов.

Разделение компонентов и тем

С помощью @at-root можно генерировать независимые глобальные классы даже внутри медиазапросов. Это облегчает организацию тем и состояний для каждого компонента.

Пример использования

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

Скомпилированный CSS

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• В этом примере, определяя стили для тёмной темы внутри .card, @at-root создаёт отдельный класс .card-dark. Это позволяет гибко переключать классы между разными темами.

Примечания

При использовании @at-root учитывайте следующие моменты.

1. Избегайте чрезмерного использования @at-root — мощный инструмент, но его чрезмерное применение может скрыть смысл вашей вложенности.

2. Проясняйте намерения Оставляйте комментарии о том, зачем вы используете @at-root — так другим разработчикам будет проще понять код.

3. Следите за согласованностью областей применимости Перенос вывода на корень может изменить зависимости стилей. Чётко определяйте, к каким элементам это применяется.

4. Комбинируйте с другими возможностями SASS Сочетание @at-root с @mixin и @function обеспечивает более гибкое проектирование CSS.

Резюме

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video