En CSS, podemos definir propiedades personalizadas (a menudo conocidas como variables CSS), que nos ofrecen una gran flexibilidad para definir un conjunto de reglas y evitar tener que volver a escribirlas una y otra vez. También podemos usar propiedades personalizadas para definir colores.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
How to define colors as variables in CSS?
</title>
<style>
:root {
--primary-color: rgb(15, 157, 88);
--secondary-color: rgb(255, 255, 255);
}
.first {
width: 50%;
padding: 40px 0px;
margin: 10px 0px;
text-align: center;
/* Apply color using CSS var */
background-color: var(--primary-color);
color: var(--secondary-color);
}
.second {
width: 50%;
padding: 40px 0px;
text-align: center;
/* Apply color using CSS var */
background-color: var(--primary-color);
color: var(--secondary-color);
}
</style>
</head>
<body>
<div class="first">
<h1>GeeksforGeeks</h1>
</div>
<div class="second">
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Explicación: En el ejemplo anterior, hemos definido dos variables que tienen un alcance de raíz (se puede usar en toda la página) --primary-colory --secondary-color. Luego, los hemos usado en la clase primero y segundo, usando la función CSS var().
Nota: :root el selector se puede reemplazar con cualquier selector local. Además, limitará el alcance de la variable definida solo dentro de ese selector.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
How to define colors as variables in CSS?
</title>
<style>
.first {
/* The defined colors are not scoped for
.first class only
*/
--primary-color: rgb(15, 157, 88);
--secondary-color: rgb(255, 255, 255);
width: 50%;
padding: 40px 0px;
margin: 10px 0px;
text-align: center;
/* Apply color using CSS var */
background-color: var(--primary-color);
color: var(--secondary-color);
}
.second {
width: 50%;
padding: 40px 0px;
text-align: center;
/* Apply color using CSS var */
background-color: var(--primary-color);
color: var(--secondary-color);
}
</style>
</head>
<body>
<div class="first">
<h1>GeeksforGeeks</h1>
</div>
<div class="second">
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamvineettiwari012 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA