Incrustación tipo Sass en CSS nativo

Incrustación tipo Sass en CSS nativo — Amit Merchant — Un blog sobre PHP, JavaScript, etc.

Si eres como yo, que considera que la función de anidamiento de CSS de Sass es muy útil, te alegrará saber que se avecinan buenos días para todos nosotros.

Entonces, si no lo sabe, la función de anidamiento de CSS de Sass le permite anidar selectores de CSS dentro de otros selectores. Por ejemplo, puedes escribir algo como esto.

.parent {
    .child {
        color: red;
    }
}

Y esto se compilará en el siguiente CSS.

.parent .child {
    color: red;
}

Esto es muy útil cuando desea escribir CSS para un elemento específico que es hijo de otro elemento. No tiene que escribir el selector principal una y otra vez. Simplemente puede anidar el selector secundario dentro del selector principal y listo.

Índice
  1. Anidamiento de CSS nativo
  2. Límites
  3. En conclusión

Anidamiento de CSS nativo

Ahora, una característica similar también está llegando a CSS nativo. El módulo de anidamiento de CSS ahora se incluye en Safari Technology Preview 162 y Chrome Dev (habilitando el "Características de la plataforma web experimental" bandera en el navegador).

Una vez habilitado, puede escribir el código similar a Sass anterior en CSS nativo.

.parent {
    .child {
        color: red;
    }

    #childWithId {
        color: red;
    }
}

Bastante genial, ¿verdad?

Sin embargo, hay algunas advertencias.

Límites

Para utilizar el anidamiento de CSS, debe anidar selectores que solo comiencen con los siguientes símbolos: ., :, [, >, +, ~, #, *. Esto se debe a la forma en que el navegador analiza el CSS. Si anida un selector que no comienza con ninguno de los símbolos anteriores (como p, span, divetc.), se ignorará el anidamiento.

Como solución alternativa, puede prefijar el selector secundario con & De este modo.

.parent {
    & span {
        color: red;
    }
}

El código anterior se compilará en el siguiente CSS.

.parent span {
    color: red;
}

También funcionará en escenarios como el siguiente.

ul {
  padding-left: 1em;
}

.component ul {
  padding-left: 0;
}

Como puedes ver, aquí el ul el selector no está anidado en el .component selector.

Así es como puede lograr lo mismo usando el & selector.

ul {
  padding-left: 1em;

  .component & {
    padding-left: 0;
  } 
}

En conclusión

Dado que el módulo de anidamiento de CSS aún se encuentra en la etapa de borrador, aún no se recomienda usarlo en producción. Pero es bueno saber que la funcionalidad entra en CSS nativo una vez que ha madurado lo suficiente.

Mientras tanto, puede probarlo en cualquiera de los navegadores compatibles y enviar sus comentarios o problemas en bugs.webkit.org o bugs.chromium.org.

Si quieres conocer otros artículos parecidos a Incrustación tipo Sass en CSS nativo puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas