En este artículo, veremos la propiedad de la regla @apply en CSS. Esta regla se usa para implementar un montón de propiedades CSS que ya se han declarado en una variable como un método en JAVA. En palabras simples, crearemos un conjunto de propiedades CSS y las almacenaremos en una variable para su uso posterior y podremos usar estas propiedades todo el tiempo que queramos.
Sintaxis:
/* outer page */
x-component {
--heading-style: {
color: red;
text-decoration: underline;
font-weight: bold;
};
}
/* shadow DOM stylesheet */
.heading {
@apply(--heading-style);
}
¿Por qué se eliminó la regla @apply?
Se eliminó porque al usar la regla @apply , solo podemos usar las propiedades estáticas que ya se han declarado y las estamos usando en todas partes. En una página web, hay varios componentes que son diferentes de otros componentes y queremos diferentes propiedades CSS personalizadas y luego tenemos que crear más variables. Hacer más y más variables para usar no es un enfoque eficiente. El enfoque eficiente es usar las mismas clases donde queremos las mismas propiedades CSS.
Nota : el siguiente código no se ejecutará porque esta regla se eliminó de los navegadores.
Ejemplo 1: En el siguiente ejemplo, veremos el uso de la regla @apply.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS @apply Rule</title>
<style>
:root {
--gfg: {
background-color: lightgreen;
border-radius: 4px;
border: 1px solid black;
color: green;
}
;
--comp-gfg: {
color: grey;
}
;
}
.head {
@apply --gfg;
}
.head-comp {
@apply --comp-gfg;
}
</style>
</head>
<body style="text-align:center">
<h1 class="head">
GeeksforGeeks
</h1>
<h3 class="head-comp">
A computer science portal for geeks
</h3>
</body>
</html>
Explicación: Del ejemplo, podemos notar que la propiedad de estilo no se refleja en la página web. Es porque la regla @apply se eliminó de los navegadores. Por lo tanto, no se ejecutará en los navegadores.
Producción:
Ejemplo 2: En el siguiente ejemplo, haremos uso de clases simples en lugar de usar la regla @apply.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Implementing simple class in CSS</title>
<style>
.gfg {
background-color: lightgreen;
border-radius: 4px;
border: 1px solid black;
color: green;
}
.comp-gfg {
color: grey;
}
</style>
</head>
<body style="text-align:center">
<h1 class="gfg">GeeksforGeeks</h1>
<h3 class="comp-gfg">
A computer science portal for geeks
</h3>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA