3

Estoy convirtiendo CSS a SASS, definiendo los estilos de los controladores de una presentación/scroller. Uno de los controladores es un botón de play/pause, que cuando se pulsa, le añade/quita la clase "pausa" al ancestro y cambia de icono.

Ahora mismo tengo algo como esto (simplificado para centrarme sólo en el botón de play):

.contenedor {
    .botones {
        .play {
            &::before {
                content:"\f04b"; // simbolo play
            }
        }
        // varias reglas aquí
    }
    // muchas más reglas aquí
    &.pausado {
        .botones {
            .play {
                &::before {
                    content:"\f04c"; // simbolo pausa
                }
            }
        }
    }
}

Esto hace lo que quiero y me genera las siguientes reglas en CSS:

.contenedor .botones .play::before { content:"\f04b"; }
.contenedor.pausado .botones .play::before { content:"\f04c"; }

Y aquí es donde tengo una duda: aunque el código generado funciona correctamente y es lo que quiero, no sé si es la mejor manera de hacerlo. Al haber muchas reglas dentro del contenedor y los botones, los estilos del botón .play quedan muy separados dentro del código y eso hace que sea "difícil" ver su relación.

¿Hay alguna manera en SASS de hacer que esas dos reglas estén juntas? Es decir, ¿se puede indicar que uno de los ancestros (o el ancestro principal) va a tener un pequeño cambio en lugar de tener que crear una nueva rama? ¿O es algo que no se recomienda?

Me refiero a tener algo como esto:

.contenedor {
    .botones {
        .play {
            &::before {
                content:"\f04b"; // simbolo play
            }
            [[algo aqui que indique que es para .contenedor.pausado]] &::before {
                content:"\f04c"; // simbolo pausa
            }
        }
    }
}

2 respuestas 2

3

Realmente creo que lo que buscas no existe. Yo también he buscado más de una vez este comportamiento (hacer referencia al elemento abuelo en vez de al padre pero no he podido encontrar nada).

Sin embargo, según tu ejemplo puedes cambiar de sentido los bloques del SASS:

.contenedor {
    &.pausado {
        .botones {
            .play {
                &::before {
                    content:"\f04c"; // simbolo pausa
                }
            }
        }
    }

    .botones {
        .play {
            &::before {
                content:"\f04b"; // simbolo play
            }
        }
        // varias reglas aquí
    }
    // muchas más reglas aquí
}

Como en el bloque de la clase pausado no tienes reglas adicionales ambas reglas de CSS se verán solapadas en el CSS final:

.contenedor.pausado .botones .play::before { content:"\f04c"; }
.contenedor .botones .play::before { content:"\f04b"; }

Como recomendación, yo siempre pongo las clases más "globales" (en este caso el bloque de la clase pausado), por encima de las reglas específicas. De esta manera, el fichero SASS queda mucho más claro y te facilita el mantenimiento del mismo.

1

Encontré una manera de hacerlo usando @at-root (enlace en inglés) y jugando con que el orden de las clases "no importa" (el selector .clase1.clase2 es equivalente a .clase2.clase1).

La directiva @at-root se introdujo como parte de Sass 3.3 y emite una colección de reglas anidadas al nivel superior del documento. Es como si se moviera el selector a la raíz del elemento, y se puede usar inline o como bloque.

Entonces puedo hacer:

.contenedor {
    .botones {
        .play {
            &::before {
                content:"\f04b"; // simbolo play
            }
            @at-root .pausado#{&}::before {
              content:"\f04c";
            }
        }
        // varias reglas aquí
    }
    // muchas más reglas aquí
}

que generaría el siguiente código CSS, equivalente al que estaba generando antes:

.contenedor .botones .play::before { content: "\f04b"; }
.pausado.contenedor .botones .play::before { content: "\f04c"; }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.