The Sass Ampersand | Programar Plus ▷ Tutoriales

El & es una característica extremadamente útil en Sass (y Less). Se usa al anidar. Puede ser un buen ahorro de tiempo cuando sabe cómo usarlo, o un poco de pérdida de tiempo cuando tiene dificultades y podría haber escrito el mismo código en CSS normal.

Veamos si realmente podemos entenderlo.

Anidamiento básico

.parent {
  .child {}
}

Esto se compila para:

.parent .child {}

Puede anidar tan profundo como desee, pero es una buena práctica mantenerlo solo en un nivel o dos para evitar selectores demasiado específicos (que son menos útiles y más difíciles de anular).

Añadiendo otra clase

El & es útil cuando está anidando y desea crear un selector más específico, como un elemento que tiene * ambos * de dos clases, como este:

.some-class.another-class { }

Puede hacer esto mientras anida utilizando el &.

.some-class {
  &.another-class {}
}

El & siempre se refiere al selector principal al anidar. Pensar en & como eliminado y reemplazado con el selector principal. Como esto:

¡El momento “ajá”!

Toma este descaro:

.parent {
  .child {}
}

En realidad, esto puede considerarse una forma abreviada de anidar con el &:

.parent {
  & .child {}
}

Entonces, estos dos ejemplos se compilan en lo mismo:

.parent .child {}

El ejemplo con el & no es nada diferente al ejemplo sin el &. Anidando sin el & es la abreviatura de anidar con él. Podemos pensar en el & como un mecanismo que nos permite colocar el selector principal donde lo necesitemos en nuestro selector secundario. Nos permite anidar con alteraciones. Veamos algunos ejemplos más.

Utilizando el `&` con pseudo clases

Puede escribir pseudoclases en una clase de una manera mucho menos repetitiva con el &:

.button {
  &:visited { }
  &:hover { }
  &:active { }
}

Esto se compila para:

.button:visited { }
.button:hover { }
.button:active { }

El & en este caso nos permite posicionar .button directamente al lado de pseudoclases sin repetición en el código creado. Si dejamos fuera el & a partir de este ejemplo, el anidamiento básico pondría un espacio entre ellos como este …

.button :hover

… Que no es lo mismo.

Utilizando el `&` con>, + y ~

Utilizando el & con el combinador de niños >, combinador de hermanos adyacentes +, y el combinador general de hermanos ~ es una brisa. Al principio pensé que tenías que usar el &, pero:

// You don't actually have to do this.
// Here, the ampersand is implied.
.button {
  & > span { }
  & + span { }
  & ~ span { }
}

Dejándo el &está fuera del selector funciona aquí:

// This compiles the same as above
.button {
  > span { }
  + span { }
  ~ span { }
}

Ambos ejemplos se compilan en este CSS:

.button > span { }
.button + span { }
.button ~ span { }

Calificación basada en el contexto

Los selectores anidados no tienen que empezar necesariamente con el ampersand. Puede calificar un selector colocando el & A la derecha.

.button {
  body.page-about & { }
}

Estamos reposicionando el selector principal exactamente donde lo necesitamos. Esto es realmente útil para calificar un selector basado en un padre diferente. Esto se compilará para:

body.page-about .button {}

Es decir, seleccione el button clase solo cuando un hijo de un body con un page-about clase.

Modificar la definición de `&`

Pensar en & como no solo reemplazado por el selector principal, sino también por el selector principal * compilado *.

Esto es importante cuando se anida a más de dos niveles de profundidad, donde más de un nivel tiene un &. Estos dos ejemplos extravagantes llevan este punto a casa.

Ejemplo loco pero funcional n. ° 1

No escriba selectores que se vean así:

.parent {
  .child {
    & div & & > a {}
  }
}

Para cada & será reemplazado por el selector padre compilado. Por tanto, cada vez que hay un & insertaremos .parent .child. Aquí está el CSS compilado:

.parent .child div .parent .child .parent .child > a {}

Ejemplo loco pero funcional n. ° 2

.parent {
  .child {
    .grand-child & {
      &.sibling { }
    }
  }
}

Para compilar mentalmente este CSS, comience en la capa superior y avance hacia abajo, despegando las capas externas y reemplazando el & con el nuevo selector padre compilado.

Aquí está compilado:

.grand-child .parent .child.sibling {}

Que `&` no es

Descubrí que estaba usando el & por algo que no era de vez en cuando. El & no le permite recorrer selectivamente su árbol de selectores anidados hasta un lugar determinado y solo usar una pequeña parte del selector principal compilado que desea usar. Quería hacer algo como esto antes:

.grand-parent {
  .parent {
    &(1) .child {} // Trying to get `.parent`, not `.grand-parent .parent`
  }
}

Mi intención era la & para ser reemplazado solo con .parent con la esperanza de compilar esto:

.parent .child {}

Pero eso no funciona.

El & es siempre el selector padre completamente compilado.

@ at-root al rescate

Vale la pena mencionar que @at-root le permite salir de su estructura de anidación por completo a la “raíz” de su árbol de anidación.

.grand-parent {
  .parent {
    @at-root .child {}
  }
}

Nos hemos teletransportado fuera del árbol de anidación a este CSS compilado:

.child {}

Esto es bonito. Desde una perspectiva organizacional, todo el código todavía está agrupado, lo que podría considerarse como un beneficio no reconocido del anidamiento. @at-root puede ayudar a mantener bajos los niveles de especificidad porque ya no tiene el selector principal compilado para aumentar la especificidad. Al mismo tiempo, mantiene su código organizado conceptualmente con anidamiento:

.grand-parent {
  .parent {
    @at-root body.page-about .child {}
  }
}

CSS compilado:

body.page-about .child {}

Hay algunos otros casos de uso para & eso puede ser divertido.

Duplicando la especificidad

A veces es necesario superar la especificidad de una biblioteca CSS de terceros para apropiarse del estilo:

.parent.parent {}

Es mucho menos abrumador que usar una identificación, estilo en línea o !important y podría tener ventajas sobre la calificación del selector con un elemento padre arbitrario. El nivel de especificidad no se eleva en función del contexto de un selector, sino solo por sí mismo. Con el & puedes hacer lo mismo como esto.

.parent {
  &#{&} { }
}

Los corchetes de interpolación #{ } son necesarios ya que dos símbolos de unión conmovedores no son válidos Sass.

Modificar el ampersand

Aunque no puede tener dos símbolos de unión tocando sin los corchetes de interpolación, como demostramos anteriormente en nuestro ejemplo de pseudoclase, puede hacer que otro selector toque el símbolo de unión. Tocar el ampersand funciona bien con clases modificadoras.

.btn {
  &-primary {}
  &-secondary {}
}

CSS compilado:

.btn-primary {}
.btn-secondary {}

Esto puede resultar muy útil si se emplea una metodología de nomenclatura (es decir, BEM) que utiliza clases combinadas de guiones y subrayados en lugar de selectores combinados.

Conclusión

El ampersand combinado con el anidamiento es una gran característica. Una vez que sepa lo que está haciendo, crear su Sass puede volverse más fácil, más rápido y menos propenso a errores.

Aquí hay un par de otros artículos específicamente sobre el ampersand, para su placer de referencia:

Hacer referencia a los selectores principales mediante el carácter comercial mediante
Adam Stacoviak
Sass Snippets: The Almighty Ampersand de Una Kravets
La característica ampersand & a killer Sass de Joel Oliveira

The Sass Ampersand | Programar Plus