Intermediocss
Variables CSS (Custom Properties)
Crea sistemas de diseno dinamicos con variables CSS para colores, espaciado y tipografia.
Definir y usar variables
Las Custom Properties se definen con
--nombre y se consumen con var(--nombre). Se heredan a traves del DOM y se pueden cambiar dinamicamente.css
1:root {
2 --color-primary: #3b82f6;
3 --color-primary-dark: #1d4ed8;
4 --radius: 8px;
5 --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
6}
7
8.button {
9 background: var(--color-primary);
10 border-radius: var(--radius);
11 box-shadow: var(--shadow);
12 color: white;
13 padding: 0.75rem 1.5rem;
14}
15
16.button:hover {
17 background: var(--color-primary-dark);
18}Temas con variables
Las variables CSS permiten implementar temas (claro/oscuro) de forma sencilla y eficiente.
css
1:root {
2 --bg: #ffffff;
3 --text: #111827;
4 --card-bg: #f9fafb;
5 --border: #e5e7eb;
6}
7
8[data-theme="dark"] {
9 --bg: #0a0a0a;
10 --text: #f3f4f6;
11 --card-bg: #1f2937;
12 --border: #374151;
13}
14
15body {
16 background: var(--bg);
17 color: var(--text);
18}
19
20.card {
21 background: var(--card-bg);
22 border: 1px solid var(--border);
23}