¿Qué es @apply en CSS?

82

En primer lugar, me refiero a la etiqueta CSS.

Busqué en Google, @applypero no pude encontrar nada que pudiera explicarme su significado correctamente.

¿Cuál es el uso de dicha etiqueta?

css GameCoder
fuente
3
tabatkins.github.io/specs/css-apply-rule Alguna lectura útil posiblemente
CollinD
1
¿Dónde lo encontraste?
j08691
2
Lo encontré en este enlace: github.com/y0ssar1an/CSS3
GameCoder
44
¿Por qué tanta gente ha rechazado esto? Es una pregunta perfectamente válida y toca una característica avanzada de CSS de la que muchas personas claramente no saben nada. Tailwind hace un uso intensivo de la @applydirectiva. 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.
stephenmurdoch

Respuestas:

29

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-themees 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

oqx
fuente
¿La función var tiene el mismo propósito en SASS que en javascript? Lo siento, no conozco ningún SASS.
GameCoder
la variable es de alguna manera el mismo control todo desde una ubicación en lugar de reescribir, la función es un poco diferente, pero sirve a la misma idea general, lo que estoy tratando de decir; por ahora no podrás usarlo de todos modos; así que si usted siente curiosidad por el Sass cheque característica (rubí) o menos (Node.js), que, cuando se les ocurrió la idea
oqx
2
La publicación del blog del autor de la especificación titulada "Por qué abandoné @apply" sugiere que esta característica NO se abrirá camino en los navegadores futuros. Especificación tal como la encontré - tabatkins.github.io/specs/css-apply-rule/#intro Retracción en - xanthir.com/b4o00
21

@applyes 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.

Eric Willigers
fuente
7

@applyes 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 .

Rolf
fuente
ikr! Me encanta la forma en que puedo usar estas clases de Tailwind CSS en @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 pinshothand en lugar de todas top/bottom/left/right: 0.
vintproykt