En primer lugar, me refiero a la etiqueta CSS.
Busqué en Google, @apply
pero no pude encontrar nada que pudiera explicarme su significado correctamente.
¿Cuál es el uso de dicha etiqueta?
En primer lugar, me refiero a la etiqueta CSS.
Busqué en Google, @apply
pero no pude encontrar nada que pudiera explicarme su significado correctamente.
¿Cuál es el uso de dicha etiqueta?
@apply
directiva. No se apresure a descartar las preguntas de la gente. Demasiado de eso está sucediendo aquí. Además, noté que el OP ya no es miembro de stackoverflow, ¿se fue por esto? Es lamentable.
Respuestas:
la forma sencilla de explicarlo sería; introduciendo variables en css (que es una característica de preprocesadores como sass), y mixin que funcionan como comportamientos (también en preprocesadores).
imagina que --header-theme
es una función (mixin)
:root {
--header-theme: {
color: red;
font-family: cursive;
font-weight: 600;
};
}
h1 {
@apply --header-theme;
}
h2 {
@apply --header-theme;
}
de esta manera puedes usarlo en muchos lugares diferentes sin tener que volver a escribirlo DRY
ahora la parte variable podría explicar con este ejemplo
:root {
--brand-color: red;/* default value*/
--header-theme: {
color: var(--brand-color);
font-family: cursive;
font-weight: 600;
};
}
h1 {
@apply --header-theme;
}
h2 {
--brand-color: green;
@apply --header-theme;
}
el mixin tendrá una variable enviada y cambiará el color
estos no son los límites de la función, puede usarla para mucho más, puede leer más sobre mixin y variables en SASS para conocer otras formas de usarla, después de que sugiero que lea esta publicación
ahora después de que te emocioné, es hora de las malas noticias, aún no está implementado en los navegadores Chrome , aún vale la pena saber que está por llegar y tal vez si quieres prepararte comienza con SASS
@apply
es de una propuesta que desde entonces ha sido abandonada y reemplazada con CSS Shadow Parts .
la regla @apply, que permite a un autor almacenar un conjunto de propiedades en una variable con nombre y luego hacer referencia a ellas en otras reglas de estilo.
@apply
es muy bueno. Básicamente, le permite reutilizar bloques CSS sin tener que copiarlos y sin tener que modificar sus selectores.
Facilitará el uso de marcos CSS y mantendrá los nombres de las clases semánticas al mismo tiempo.
Encontré que este artículo es una buena introducción a esta función.
Desafortunadamente, por el momento, el soporte del navegador es básicamente inexistente . Se puede utilizar con un preprocesador CSS como PostCSS .
Su futuro también es incierto, si lo entiendo bien. El principal defensor de esta función dejó de apoyarla .
@apply
. Eso introduce una forma excepcionalmente nueva de trabajar con hojas de estilo que te deja con ladrillos reutilizables, que también se clasifican fácilmente; en realidad, puedes ordenarlos (puedes usar la referencia para esto como yo de la ToC de la documentación de Tailwind CSS) y ya no propiedades para escanear hojas de estilo. ¡eficientemente! Hay muchas posibilidades, como escribir simple pin
shothand en lugar de todas top/bottom/left/right: 0
.