SASS `@at-root`

Este artículo explica @at-root de SASS.

Cubriremos todo, desde el uso básico de @at-root hasta ejemplos avanzados, paso a paso.

YouTube Video

Acerca de @at-root de SASS

@at-root es una directiva que proporciona SASS y se utiliza para mover selectores o propiedades anidados desde el anidamiento actual al ámbito padre. Al aprovechar esta característica, puedes controlar la profundidad del anidamiento y generar el CSS deseado con mayor eficiencia.

Uso básico de @at-root

El anidamiento de SASS hace que el código sea más legible, pero un anidamiento excesivamente profundo puede provocar que se genere CSS no deseado. Al usar @at-root, puedes excluir bloques de código específicos de la estructura de anidamiento.

Sintaxis Básica

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

Uso de Ejemplo

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

CSS compilado

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

• Gracias a @at-root, .nav-item se genera fuera de .nav.

@at-root en selectores anidados

Incluso dentro de un anidamiento profundo, usar @at-root te permite mover selectores específicos al nivel raíz. Esto te permite generar CSS controlado incluso dentro de estructuras complejas.

Uso de Ejemplo

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

CSS compilado

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

• Al usar @at-root, .card-title se genera fuera de .card-header.

@at-root con argumentos

Al especificar argumentos, @at-root puede controlarse con mayor flexibilidad.

sin argumento

Cuando usas el argumento without, la salida ignora los ámbitos especificados. En otras palabras, puedes eliminar reglas padre o consultas de medios (media queries).

Uso de Ejemplo

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

CSS compilado

1.nav__item {
2  color: red;
3}

• En este caso, @at-root (without: media) excluye el ámbito de la media query, y .nav__item se genera en la raíz.

con argumento

Usar with mantiene solo los ámbitos especificados en la salida. Útil cuando quieres generar en la raíz preservando ámbitos específicos.

Uso de Ejemplo

 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 compilado

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

• @at-root (with: media) mueve el selector a la raíz preservando la estructura de la media query.

Especificar múltiples condiciones

También puede especificar varios ámbitos al mismo tiempo, separados por espacios.

Uso de Ejemplo

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

CSS compilado

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

• En este ejemplo, tanto rule (selectores regulares) como media (media queries) se excluyen, por lo que .global-style no pertenece a ningún ámbito y se genera completamente en el nivel raíz. Esto es útil cuando quieres definir intencionalmente estilos globales incluso dentro de un anidamiento complejo.

Combinación con media queries

Con @at-root, puedes generar estilos de nivel raíz desde dentro de las consultas de medios. Esto te permite definir el diseño adaptable a nivel de componente.

Uso de Ejemplo

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

CSS compilado

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

• Con @at-root, también puedes generar estilos a nivel raíz desde dentro de media queries. Esto facilita definir estilos globales independientes para cada breakpoint.

Casos de uso de @at-root

@at-root es útil cuando deseas generar estilos a nivel raíz bajo condiciones específicas. Es especialmente útil al manejar media queries o estilos específicos de tema dentro de componentes.

Separación de componentes y temas

Al usar @at-root, puedes generar clases globales independientes incluso desde dentro de media queries. Esto facilita organizar temas y estados por componente.

Uso de Ejemplo

 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 compilado

 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}

• En este ejemplo, mientras se definen estilos para el tema oscuro dentro de .card, @at-root genera una clase .card-dark independiente. Esto te permite cambiar clases de forma flexible entre diferentes temas.

Notas

Al usar @at-root, ten en cuenta los siguientes puntos.

1. Evita el uso excesivo @at-root es potente, pero su uso excesivo puede oscurecer la intención de tu anidamiento.

2. Aclara la intención Dejar comentarios sobre por qué estás usando @at-root facilita la comprensión para otros desarrolladores.

3. Ten en cuenta la consistencia de los ámbitos Mover la salida a la raíz puede cambiar las dependencias de estilos. Sé claro acerca de a qué elementos se aplica.

4. Combínalo con otras características de SASS Combinar @at-root con @mixin y @function permite un diseño de CSS más flexible.

Resumen

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

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video