Sass de alguna manera puede ser una pequeña caja negra, especialmente para los desarrolladores jóvenes: pones algunas cosas, obtienes algunas cosas. Tome la referencia del selector ( &), por ejemplo, da un poco de miedo.
Dicho esto, no tiene por qué ser así. Podemos hacer su sintaxis más amigable con nada más que dos mixins muy simples.
Eventos
Al escribir Sass, a menudo te encuentras escribiendo cosas como esta:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Bastante tedioso y no necesariamente fácil de leer. Podríamos crear un pequeño mixin para hacerlo más sencillo.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Reescribiendo nuestro ejemplo anterior:
.my-element ( color: red; @include on-event ( color: blue; ) )Mucho mejor, ¿no?
Ahora, si queremos incluir el selector en sí, podemos establecer el $selfparámetro en true. Por ejemplo:
.my-element ( @include on-event($self: true) ( color: blue; ) )Este fragmento de SCSS producirá:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contextos
En la misma línea, no es raro diseñar un elemento según el padre que tenga. Por ejemplo, algo como esto:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Hagamos la sintaxis un poco más amigable nuevamente con un simple mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Reescribiendo nuestro ejemplo anterior:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )