CSS
Tutorial CSS: Variables en CSS
CSS variables: uso y ejemplos. Domina el uso de variables en CSS con ejemplos prácticos y detallados.
Aprende CSS GRATIS y certifícate¿Qué es una variable en CSS?
Una variable en CSS, también conocida como “custom property” (propiedad personalizada), es una forma de almacenar y reutilizar valores de propiedad de estilo. Introducidas en la especificación CSS Variables Module Level 1, las variables CSS permiten definir un solo valor y usarlo en múltiples lugares, facilitando el mantenimiento y la gestión de los estilos en un proyecto. Esta habilitación reduce significativamente la redundancia y el riesgo de errores al hacer cambios en el diseño.
Una variable CSS se define utilizando la sintaxis de --nombre-variable: valor;
, donde --nombre-variable
es un identificador único, y valor
es la propiedad CSS que deseas almacenar. Estas variables pueden ser reutilizadas en cualquier parte del documento CSS utilizando la función var(--nombre-variable)
.
Las variables CSS son específicas del entorno del navegador y se diferencian de las preprocesadas (como las variables en SASS o LESS) porque son dinámicas, es decir, pueden ser actualizadas y manipuladas en tiempo real mediante JavaScript. Esto significa que pueden variar durante la ejecución del código, permitiendo una mayor interactividad y personalización de los estilos directamente desde el navegador.
Además, las variables CSS admiten el concepto de herencia, donde las variables definidas en un elemento padre se pueden utilizar en sus elementos hijos. Esto facilita establecer temas y estilos cohesivos a través de las distintas secciones de un sitio web o aplicación.
Ejemplo básico de una variable CSS:
:root {
--color-primario: #3498db;
}
body {
color: var(--color-primario);
}
En este ejemplo, --color-primario
se define en el selector :root
, que representa el elemento raíz del documento, haciendo la variable accesible globalmente. Luego, esta variable se utiliza para establecer el color del texto del cuerpo del documento. Si necesitas cambiar el color primario, solo tienes que cambiar el valor de --color-primario
en un solo lugar, y el cambio se propagará automáticamente a todos los elementos que utilizan esa variable en su definición de estilos.
Sintaxis básica de una variable CSS
Las variables CSS, o propiedades personalizadas, siguen una sintaxis específica para su declaración y uso. A continuación, se desglosa esta sintaxis en sus dos componentes principales: la declaración y la utilización.
Declaración de una variable CSS
Las variables CSS se declaran dentro de un selector de CSS. La convención recomendada para nombrar estas variables es preceder el nombre con dos guiones (--
). La declaración sigue el formato:
selector {
--nombre-variable: valor;
}
Aquí, selector
puede ser cualquier selector válido de CSS, como un elemento HTML, una clase, un ID**,** o incluso el pseudo-selector :root
para definir variables globales. --nombre-variable
debe ser un identificador único elegido por el desarrollador, y valor
es el valor de la propiedad CSS que se desea almacenar.
Ejemplo de una declaración:
:root {
--font-size-base: 16px;
--spacing-unit: 8px;
}
En este ejemplo, se han declarado dos variables globales, --font-size-base
con un valor de 16px
y --spacing-unit
con un valor de 8px
.
Utilización de una variable CSS
Para utilizar una variable en una regla de estilo CSS, se emplea la función var()
, pasándole el nombre de la variable precedido por dos guiones. La sintaxis es la siguiente:
selector {
propiedad: var(--nombre-variable);
}
Esta técnica permite aplicar el valor de la variable a cualquier propiedad CSS.
Ejemplo de utilización:
body {
font-size: var(--font-size-base);
margin: var(--spacing-unit);
}
En este ejemplo, el font-size
del elemento body
se establece utilizando el valor de --font-size-base
, y el margin
se establece con el valor de --spacing-unit
.
Valores por defecto con var()
La función var()
también admite un valor por defecto, que se utilizará si la variable CSS especificada no está definida. Esto se realiza pasando un segundo argumento a var()
, separado por una coma:
selector {
propiedad: var(--nombre-variable, valor-por-defecto);
}
Ejemplo con valor por defecto:
p {
color: var(--color-texto, #333);
}
En este caso, si --color-texto
no está definido, el color del texto de los párrafos será #333
.
Combinación con otros valores
Las variables CSS pueden combinarse con otros valores directamente en las propiedades de CSS. Esto permite una gran flexibilidad en la construcción de reglas de estilo.
Ejemplo de combinación:
button {
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius, 5px);
}
Aquí, padding
se calcula multiplicando --spacing-unit
por 2 y border-radius
usa --border-radius
si está definido, o 5px
como valor por defecto.
Estas técnicas básicas de sintaxis permiten manejar y aplicar variables CSS de manera efectiva, mejorando la capacidad de mantenimiento y flexibilidad del código CSS en proyectos contemporáneos.
Definición de variables a distintos niveles
Las variables CSS pueden definirse a distintos niveles de especificidad, lo que permite gestionar con precisión dónde y cómo se aplican estas funcionalidades. A continuación, se explican los niveles más comunes:
Variables globales
Las variables globales se declaran generalmente en el pseudo-selector :root
. Este selector representa el nivel más alto del árbol DOM, por lo que las variables definidas aquí están disponibles en todo el documento CSS.
:root {
--color-principal: #3498db;
--font-size-base: 16px;
}
Las variables globales son ideales para definir temas y estilos aplicables a toda la aplicación, como colores principales o tamaños de fuentes base.
Variables específicas de componentes
Las variables también pueden declararse a nivel de un componente, clase o ID, lo que permite una configuración más específica y enfocada.
.card {
--card-bg-color: #fff;
--card-border-radius: 8px;
}
.card-header {
background-color: var(--card-bg-color);
border-top-left-radius: var(--card-border-radius);
border-top-right-radius: var(--card-border-radius);
}
En este ejemplo, las variables --card-bg-color
y --card-border-radius
están definidas dentro del selector .card
, haciendo que solo estén disponibles dentro de este contexto y sus descendientes.
Variables locales dentro de un alcance específico
En situaciones donde se necesitan diferentes valores contextuales para las mismas propiedades, se pueden definir variables en un selector más limitado.
.page-header {
--header-padding: 20px;
}
.page-footer {
--header-padding: 10px;
}
.header {
padding: var(--header-padding);
}
Aquí, la variable --header-padding
se define con diferentes valores en los selectores .page-header
y .page-footer
, y se utiliza dentro del selector .header
. Dependiendo del nodo en el que se encuentre .header
, se aplicará el valor correspondiente.
Variables definidas en pseudo-clases y pseudo-elementos
Las variables CSS también pueden ser definidas dentro de pseudo-clases (:hover
, :focus
) y pseudo-elementos (::before
, ::after
).
.button {
--button-color: #007bff;
color: var(--button-color);
}
.button:hover {
--button-color: #0056b3;
color: var(--button-color);
}
En el ejemplo, la variable --button-color
cambia su valor al situarse en el pseudo-elemento :hover
, lo que permite una interacción visual sin requerir múltiples declaraciones de propiedades.
Este enfoque multinivel permite una reutilización eficiente de valores y mayor control sobre la estilización a diferentes niveles de especificidad, desde global hasta local, favoreciendo la flexibilidad y mantenibilidad del código CSS.
Uso de variables CSS
Una vez definidas las variables, su uso se integra naturalmente en las reglas de estilo CSS a través de la función var()
. La capacidad de reutilización de las variables reduce la redundancia y facilita la modificación de valores centralizados. A continuación, se detallan diversas maneras en las que podemos utilizar estas variables en un proyecto CSS.
Aplicación básica de variables
Las variables se emplean en cualquier propiedad CSS mediante la función var()
. Esta técnica permite que las propiedades sean dinámicas y fácilmente actualizables.
:root {
--color-primario: #3498db;
--margen-base: 10px;
}
body {
color: var(--color-primario);
margin: var(--margen-base);
}
En este ejemplo, --color-primario
y --margen-base
se utilizan para especificar el color y el margen del cuerpo del documento.
Valores por defecto
En situaciones donde una variable puede no estar definida, var()
permite establecer un valor por defecto que se utilizará si la variable no ha sido asignada.
.box {
padding: var(--padding-custom, 16px);
}
Aquí, si --padding-custom
no está definido, la propiedad padding
de .box
tomará el valor de 16px
.
Combinación con otras propiedades y valores
Las variables CSS pueden combinarse con otros valores dentro de una propiedad, permitiendo cálculos y concatenaciones dinámicas.
:root {
--spacing-unit: 8px;
}
.container {
padding: calc(var(--spacing-unit) * 2);
}
En este ejemplo, la propiedad padding
de .container
se calcula multiplicando --spacing-unit
por 2.
Uso en pseudo-clases y pseudo-elementos
Las variables también pueden ser utilizadas dentro de pseudo-clases y pseudo-elementos para estilos específicos en ciertos estados.
.button {
--color-boton: #007bff;
color: var(--color-boton);
}
.button:hover {
--color-boton: #0056b3;
color: var(--color-boton);
}
Al pasar del estado normal al de :hover
, la variable --color-boton
cambia de valor, modificando el color del texto del botón.
Integración con otras funciones CSS
Las variables pueden utilizarse junto con otras funciones CSS para mayor flexibilidad. Por ejemplo, en transiciones y animaciones:
:root {
--duracion-transicion: 0.3s;
}
.card {
transition: transform var(--duracion-transicion);
}
.card:hover {
transform: scale(1.1);
}
Aquí, --duracion-transicion
define la duración de la transición aplicada a .card
.
Temas dinámicos
Las variables CSS permiten la implementación de temas dinámicos, donde puedes cambiar la apariencia completa de un sitio web mediante la actualización de unas pocas variables.
:root {
--color-fondo: #fff;
--color-texto: #000;
}
[data-tema="oscuro"] {
--color-fondo: #333;
--color-texto: #fff;
}
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
En este ejemplo, cambiando el atributo de data-tema
a "oscuro" se actualizan las variables y el esquema de colores del cuerpo del documento.
Herencia de variables
Las variables CSS se heredan en elementos descendientes, lo cual permite que estilos declarados en un nivel global o de componente se propaguen automáticamente.
.parent {
--bg-color: #f0f0f0;
}
.child {
background-color: var(--bg-color);
}
La variable --bg-color
definida en .parent
se puede utilizar en .child
, aplicando el color de fondo correctamente.
Estas técnicas demuestran la versatilidad y el poder de las variables CSS, proporcionando una herramienta eficaz para la creación de estilos más mantenibles y flexibles en proyectos modernos.
Alcance, ámbito y herencia de las variables CSS
El alcance, ámbito y herencia de las variables CSS representan fundamentos esenciales para entender cómo y dónde estas variables pueden ser utilizadas, así como su propagación a lo largo del DOM.
Alcance de las variables CSS
El alcance de una variable CSS se define por el selector en el que se declara. Cuando una variable es definida en el pseudo-selector :root
, su alcance es global, abarcando todo el documento:
:root {
--color-primario: #3498db;
}
Aquí, --color-primario
está disponible en cualquier lugar del documento, permitiendo su uso efectivo en múltiples componentes.
Si una variable se define dentro de un selector específico, su alcance se limita a ese selector y sus descendientes:
.card {
--color-fondo: #fff;
}
En este caso, --color-fondo
solo está disponible dentro del contexto del .card
y sus elementos hijos.
Ámbito de las variables CSS
El ámbito de una variable CSS se refiere a la región específica del documento donde la variable puede ser utilizada. Este ámbito está determinado por la estructura jerárquica del DOM y el lugar de la declaración de la variable.
Variables globales, declaradas en :root
, tienen el ámbito más amplio posible:
:root {
--tamaño-texto-base: 16px;
}
Estas variables pueden ser usadas en cualquier parte del documento CSS.
Por otro lado, las variables declaradas en selectores más específicos tienen un ámbito restringido a esos selectores y sus descendientes directos:
.section-header {
--margen-interno: 20px;
}
.section-header-title {
padding: var(--margen-interno);
}
Aquí, --margen-interno
tiene un ámbito limitado dentro de los elementos que son descendientes de .section-header
, como .section-header-title
.
Herencia de las variables CSS
Las variables CSS se heredan en los elementos descendientes, facilitando la propagación de valores a lo largo del árbol DOM. Esto permite mantener la coherencia de los estilos en componentes relacionados y evitar redundancias declarativas.
Por defecto, si una variable es declarada en un elemento padre, sus hijos pueden acceder a esta variable salvo que definan un valor propio:
.container {
--espaciado: 10px;
}
.container .item {
margin: var(--espaciado);
}
En este ejemplo, .item
hereda --espaciado
desde .container
y lo utiliza para establecer su margen. Si una variable es redefinida en un descendiente, esa nueva definición prevalece dentro de ese ámbito:
.container {
--color-fondo: #f0f0f0;
}
.container .item {
--color-fondo: #e0e0e0;
background-color: var(--color-fondo);
}
Aquí, .item
redefine --color-fondo
y utiliza esta nueva definición para su background-color
, sobreescribiendo la herencia desde .container
.
Ámbito Shadow DOM
En el contexto del Shadow DOM, las variables CSS también respetan los límites establecidos por sus componentes encapsulados, no afectando el ámbito de otros componentes a menos que se los exponga explícitamente:
:host {
--color-primario: #3498db;
}
.part {
color: var(--color-primario);
}
Dentro del componente Shadow DOM, --color-primario
está disponible para los selectores declarados, preservando la encapsulación e integridad de los estilos.
Este detallado entendimiento del alcance, ámbito y herencia de las variables CSS facilita un control más preciso de los estilos en proyectos complejos, optimizando la reutilización y consistencia del diseño.
Ejercicios de esta lección Variables en CSS
Evalúa tus conocimientos de esta lección Variables en CSS con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja Y Posicionamiento
Propiedades De Posicionamiento
Modelo Caja Y Posicionamiento
Propiedad 'Display'
Modelo Caja Y Posicionamiento
Elementos 'Float' Y 'Clear'
Modelo Caja Y Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox Y Grid
Css Grid Para Crear Layouts Y Estructuras
Flexbox Y Grid
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
Introducción A Tailwind Css
Introducción Y Entorno
Instalación De Tailwind Css
Introducción Y Entorno
Fundamentos Del Sistema De Utility-first En Tailwind Css
Fundamentos
Fundamentos Del Diseño Responsive En Tailwind Css
Fundamentos
Tipografía Y Fuentes En Tailwind Css
Clases De Utilidad
Clases De Tamaño De Tailwind Css
Clases De Utilidad
Utilidades De Espaciado Y Alineación De Tailwind Css
Clases De Utilidad
Clases De Colores Y Fondo De Tailwind Css
Clases De Utilidad
Clases De Bordes De Tailwind Css
Clases De Utilidad
Hover, Focus Y Estado De Tailwind Css
Clases De Utilidad
Transiciones Y Animaciones De Tailwind Css
Clases De Utilidad
Contenedores Y Columnas En Tailwind Css
Layout
Flexbox En Tailwind Css
Layout
Grid En Tailwind Css
Layout
Conocimiento General De Tailwind Css - Evaluación Multirespuesta
Evaluación
Conocimiento General De Tailwind Css - Evaluación Código
Evaluación
Certificados de superación de CSS
Supera todos los ejercicios de programación del curso de CSS y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Entender el concepto de variables en CSS y su sintaxis.
- Diferenciar las variables CSS de las preprocesadas (SASS/LESS).
- Aprender cómo definir y utilizar variables CSS globales y locales.
- Implementar valores por defecto y combinaciones dinámicas en propiedades CSS.
- Explorar el alcance, ámbito y herencia de variables CSS.
- Integrar variables CSS en pseudo-clases, pseudo-elementos y Shadow DOM.