Simplificando Contextos y Eventos | Programar Plus

Sass puede ser un poco como una caja negra, especialmente para los desarrolladores jóvenes: pones algunas cosas y sacas otras. Tome la referencia del selector (&) por ejemplo, da un poco de miedo.

Dicho esto, no tiene por qué ser así. Podemos hacer que su sintaxis sea 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 simple.

/// 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 propio selector, podemos configurar el $self parámetro a true. Por ejemplo:

.my-element {
    @include on-event($self: true) {
        color: blue;
    }
}

Este fragmento SCSS producirá:

.my-element,
.my-element:hover,
.my-element:active,
.my-element:focus {
    color: blue
}

Contextos

De la misma manera, no es raro dar estilo a un elemento dependiendo del padre que tenga. Por ejemplo, algo como esto:

.my-element {
    display: flex;

    .no-flexbox & {
        display: table;
    }
}

Hagamos que la sintaxis sea un poco más amigable nuevamente con una combinación simple:

/// Contexts
/// @author Kitty 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;
    }
}