Saltar al contenido

CSS Variables

Abrir en ChatGPT

Las variables CSS juegan un papel central en la personalización de la apariencia de los componentes de webforJ. Estas variables almacenan valores reutilizables como colores, tamaños de fuente y espaciado, que se pueden aplicar de manera consistente en tu aplicación.

A diferencia de los enfoques tradicionales que dependían de preprocesadores CSS como SASS o LESS, las variables CSS permiten estilos dinámicos en tiempo de ejecución. Reducen la repetición, mejoran el mantenimiento y hacen que las hojas de estilo sean más fáciles de leer y gestionar.

Definir variables CSS​

Las variables CSS se definen utilizando un prefijo de doble guion (--), y se pueden delimitar dentro de cualquier selector CSS. Sin embargo, la práctica más común es definirlas en el selector :root, que las delimita globalmente.

:root {
  --app-background: orange;
}
La pseudo-clase :root

La :root pseudo-clase apunta al elemento raíz del documento—típicamente <html> en HTML. Se comporta como html, pero con mayor especificidad.

Las variables CSS pueden contener cualquier cadena, no solo valores CSS válidos. Esta flexibilidad es particularmente útil al trabajar con JavaScript.

html {
  --app-title: webforJ;
}

Variables específicas de componentes​

Para definir o sobrescribir una variable para un componente específico, declárala dentro del selector del componente:

dwc-button {
  --dwc-button-font-weight: 400;
}
Referencia de Estilización Específica de Componentes

Cada componente de webforJ soporta un conjunto específico de variables CSS que controlan su apariencia. Estas se documentan en la sección Estilización > Propiedades CSS para cada componente.

Usar variables CSS​

Utiliza la función var() para aplicar el valor de una variable en tus estilos:

.panel {
  background-color: var(--app-background);
}

También puedes especificar un valor por defecto en caso de que la variable no esté definida:

.frame {
  background-color: var(--app-background, red);
}

Manipular variables con webforJ​

Las variables CSS se pueden actualizar dinámicamente a través de la API de webforJ, permitiendo estilos en tiempo real:

// Establecer una variable CSS
button.setStyle('--dwc-button-font-weight', '400');
Manipulando Variables CSS con JavaScript

webforJ te permite ejecutar JavaScript en el lado del cliente utilizando la API Page o Element. Esto significa que puedes manipular dinámicamente las variables CSS en tiempo de ejecución tal como lo harías en aplicaciones web estándar.

// Establecer una variable CSS
const el = document.querySelector('dwc-button');
el.style.setProperty('--dwc-button-font-weight', '400');

// Obtener una variable CSS
const value = el.style.getPropertyValue('--dwc-font-size-m');

Recursos adicionales​