Una vez que esté familiarizado con CSS, puede comenzar a descubrir funciones más avanzadas que hacen que su escritura sea más fácil y rápida. Por ejemplo, ¿sabías que las variables CSS son algo?
Las variables CSS son el siguiente paso para llevar sus habilidades de programación front-end al siguiente nivel. Harán que su código CSS sea más preciso, más limpio y más fácil de editar en masa. En esta publicación, cubriremos:
Empecemos.
¿Qué son las variables CSS?
En la programación de computadoras, una variable es la unidad que almacena un valor asignado. Las variables son la base de todos los programas de computadora porque permiten que las computadoras almacenen y manipulen información.
Aunque técnicamente no es un lenguaje de programación, CSS tiene su propia versión de variables. Las variables CSS, también llamadas propiedades personalizadas, son una característica especial que funciona de manera un poco diferente al CSS escrito tradicionalmente.
Por lo general, cuando escribe una declaración en CSS, escribe una propiedad (por ejemplo, color de fondo) seguido de un valor (p. ej. Verde). Esta declaración está vinculada a un selector de CSS como este:
div { background-color: green; }
Antes de las variables CSS, esta era la única forma de escribir declaraciones. Si quisiera algo como variables CSS, tendría que usar un lenguaje de preprocesamiento como Hablar con descaro a (que se incorpora a marcos CSS como Bootstrap).
Sin embargo, las variables CSS ahora brindan una forma diferente de aplicar estilo a los elementos de la página sin un complemento. Las variables CSS nos permiten crear nuestros propios valores personalizados, lo que hace que nuestro código sea más fácil de entender y editar. Desempaquemos cómo usarlos.
Declaración de variables CSS
Para usar una variable CSS, primero debemos declararla. Las variables CSS pueden tomar cualquier valor CSS. Para este ejemplo, usaremos valores de color (representados como códigos hexadecimales) y familias de fuentes.
Para declarar una variable CSS, guárdela en un conjunto de reglas como cualquier otra declaración CSS. La diferencia es que una propiedad de variable CSS siempre comienza con dos guiones (-) seguidos del nombre que le asigne. Por ejemplo:
p {--main-text-color: #FF7A59;
--main-text-font: 'Avenir';
}
Aquí creé dos propiedades personalizadas: –principal-texto-color asignado un valor hexadecimal #FF7A59 (bonito tono naranja) y –main-text-fuente asignado un tipo de letra «Avenir».
Tenga en cuenta que los nombres de propiedades personalizadas distinguen entre mayúsculas y minúsculas. variable CSS nombrada –principal-texto-color se interpretará como una variable distinta de –Principal-texto-color. Es una buena idea evitar los nombres de variables CSS en mayúsculas para evitar confusiones.
Cómo usar variables CSS
Hasta este punto, solo creamos nuestras variables. Todavía no las hemos asignado a ningún selector HTML, por lo que las variables CSS no afectarán nada en la página.
Para aplicar nuestras variables CSS a HTML, usamos variable() función. En programación, una función es una sección de código que hace un trabajo. Las funciones a menudo se identifican entre paréntesis después del nombre de la función.
Trabajar variable() La función es encontrar una variable CSS específica y aplicarla a un selector. Está escrito de la siguiente manera:
var(--css-variable-name)
… dónde –css-nombre-variable es la variable CSS que desea aplicar.
Continuando con nuestro ejemplo, podemos aplicar nuestras variables CSS al selector de la siguiente manera:
p {--main-text-color: #FF7A59;
--main-text-font: 'Avenir';
color: var(--main-text-color);
font-family: var(--main-text-font);
}
En este código usamos variable() dos veces. Primero, variable() encuentra valor –principal-texto-color propiedad personalizada que creamos y luego aplicar ese valor (#FF7A59) a color cualquier texto dentro de un
etiqueta.
Próximo, variable() toma el valor –main-text-fuente y utiliza este valor («Avenir») a Familia tipográfica propiedad de texto dentro de todo
Etiquetas.
Cuando aplicamos este CSS a HTML, obtenemos el siguiente resultado:
ver la pluma Variables CSS – ejemplo 1 por HubSpot (@hubspot) en CódigoPen.
Herencia con variables CSS
Al igual que con CSS normal, los elementos secundarios heredan los valores de las variables CSS de sus elementos principales (siempre que el valor principal no se anule en el elemento secundario). Considere el siguiente ejemplo:
ver la pluma Variables CSS – ejemplo 2 por HubSpot (@hubspot) en CódigoPen.
porque asignamos –principal-texto-color valor al primer div de ambos su hijo
y los elementos que contiene heredan esta variable personalizada:
Alcance y principales variables CSS
Es posible que haya notado que en el ejemplo anterior declaré mis variables CSS usando un selector llamado :fuente. ¿Qué significa?
Cuando declaras una variable CSS, también le das un alcance. El alcance de la variable determina dónde actuará esa variable en función de dónde la declare. Las variables CSS pueden tener local o global rango.
Las variables CSS locales solo funcionan en el selector donde fueron creadas. Ilustremos esto modificando el ejemplo anterior: ¿Qué pasa si tomo –principal-fondo-color declaración y muévala a #Sección 1 ¿selector?
ver la pluma Variables CSS – ejemplo 3 por HubSpot (@hubspot) en CódigoPen.
Ya que –principal-fondo-color ahora se declara en #Sección 1su alcance ha cambiado. Esta variable ahora solo se aplicará al primer div, no al segundo div. Sucede porque –principal-fondo-color la variable es «local» para #Sección 1.
Por otro lado, las variables CSS que funcionan a lo largo del documento se denominan variables CSS globales. Creamos variables CSS globales escribiendo sus reglas para :fuente selector. :fuente se aplica al elemento más alto en el modelo de objetos de un documento HTML, que contiene todo lo demás en el documento.
Si bien puede declarar variables CSS en cualquier selector CSS, es una práctica común declarar todas o la mayoría de las variables CSS en :fuente por lo que funcionarán universalmente en su documento.
valores sustitutivos
Cada vez que usas variable()debe especificar una variable CSS entre paréntesis. También tienes la opción de escribir valor de reservaValor de CSS para usar si por alguna razón la variable CSS no funciona, como un error tipográfico en alguna parte de CSS, o si el navegador no puede mostrar el valor especificado para la variable.
Los valores de reemplazo se colocan entre paréntesis variable() invocado después del primer argumento, el nombre de la variable CSS. Ambos argumentos están separados por una coma. El valor de reserva en nuestro ejemplo se ve así:
p {color: var(--main-text-color, #FF4500); /* #FF4500 is the fallback value */
font-family: var(--main-text-font, 'Helvetica'); /* 'Helvetica' is the fallback value */
}
Incluso puede agregar varios marcadores de posición para la misma propiedad CSS en caso de que la primera alternativa no funcione. Los valores de reemplazo múltiples se almacenan en una lista separada por comas y se aplican en el siguiente orden:
p {font-family: var(--main-text-font, 'Helvetica', 'Arial', 'Courier');
}
Si bien es opcional, el valor del marcador de posición garantiza que se aplique algún tipo de estilo en caso de que se produzca un error con una variable CSS.
¿Por qué usar variables CSS?
Hemos aprendido mucho sobre cómo usar las variables CSS, pero ¿por qué son realmente útiles? Veamos tres beneficios clave de las propiedades personalizadas: permiten la edición masiva, el estilo dinámico y una mejor legibilidad.
Edición masiva
Imagine este escenario: acaba de completar el último borrador de su sitio web y todo se ve muy bien. Luego, su gerente le envía un correo electrónico. Les encanta el sitio, pero te pidieron que cambiaras el color de fondo violeta claro a algo más terroso.
No es un problema. Solo necesitas encontrar el nuevo color, luego abrir los archivos CSS y sustituir el valor morado en un lugar y otro… y aquí… ah, y aquí casi se me escapa esto…
«Está bien», dices un rato después, «los tengo todos. Probablemente.»
En este escenario, se ve obligado a lidiar con la desventaja de CSS: si tiene un estilo (por ejemplo, color, fuente, etc.) que desea aplicar a su sitio, probablemente tendrá que escribirlo en muchos lugares en el código, potencialmente docenas o incluso cientos.
Pero, ¿y si quieres cambiar la regla? En CSS tradicional, tendrías que cambiar cada aparición de una regla en el código. Incluso con la función «buscar y reemplazar», el proceso es engorroso, tedioso y propenso a errores.
Esto nos lleva a quizás el mayor beneficio de las variables CSS: permiten cambios de estilo extensos con cambios mínimos de código.
Imagina si uno de tus colores de marca, Seafoam Green (representado por un código hexadecimal) # 93E9BE) debe aplicarse al fondo, el texto y los íconos de su sitio. Con un nuevo conocimiento de las variables CSS, puede crear una propiedad personalizada para su tono de verde:
:root {--brand-green: #93E9bE;
}
Luego aplique este valor a los elementos deseados:
div { /* this can be any element */color: var(--brand-green);
}
Si en algún momento necesita cambiar ese tono de verde, solo necesita cambiar la declaración de la variable CSS.
:root {--brand-green: #55C98F; /* that was easy */
}
Este cambio se aplicará automáticamente a todos los artículos con el valor especificado var (- marca verde). No más rastrear cada aparición de código hexadecimal antiguo y cambiarlo.
Estilo dinámico
Las variables CSS nos permiten cambiar dinámicamente los elementos del estilo de la página; en otras palabras, sin tener que volver a cargar la página.
Esta habilidad es especialmente útil para el diseño receptivo. Junto con las consultas de medios (función CSS que detecta las propiedades del dispositivo, como el tamaño de la pantalla), las variables CSS pueden ajustar los elementos al tamaño del área visible.
Por ejemplo, apliquemos este CSS a un
:root {--div-width: 1000px;
--div-height: 250px;
--brand-green: #93E9BE;
}
div {
width: var(--div-width);
height: var(--div-height);
background-color: var(--brand-green);
}
@media (max-width: 1000px) {
:root { --div-width: 500px; }
}
en :fuente y división selectores, definimos el ancho, alto y color para el nuestro
Este efecto afectará a todos.
Legibilidad
Una ventaja final: las variables CSS se pueden escribir de tal manera que sean más fáciles de entender para los programadores. Si solo ves el código hexadecimal # 93E9BEno sabrás qué color produce mientras –marca-verde explica el propósito de la variable.
Ahorre tiempo con CSS variable.
Una vez que haya dominado los conceptos básicos de CSS, la incorporación de variables CSS en su vocabulario de programación le ahorrará mucho tiempo. Desde ajustes menores hasta cambios de marca completos, es una buena idea formatear su CSS de una manera que pueda leer y modificar rápidamente y sin problemas.
Por supuesto, los conceptos que he explicado son solo los básicos. Le animamos a experimentar más: controle sus variables con JavaScript (aqui hay un buen tutorial para empezar), experimenta con función de cálculo ()y vea qué proyectos atractivos y de alta conversión se le ocurren.
Nota del editor: esta publicación se publicó originalmente en noviembre de 2020 y se actualizó para que esté completa.
