Share
Las variables existen invariablemente en todos los lenguajes de programación, y eso es porque son bastante útiles. Solo tiene que almacenar un valor en una variable una vez, y luego puede usarlo varias veces más tarde, evitando la repetición. Si bien CSS no es un lenguaje de programación, la falta de variables todavía limita sus capacidades.
Ahora que las variables CSS nativas están alrededor, me gustaría discutir en qué se diferencian de las variables que proporcionan los preprocesadores CSS y cómo usarlas correctamente.
La sintaxis para usar propiedades personalizadas es un poco detallada, y algunos desarrolladores podrían considerarla fea. Un factor más que desalienta el uso de variables nativas es el soporte existente proporcionado por las variables Sass..
Si bien los preprocesadores como Sass admiten las variables, todavía tienen algunas limitaciones que analizaré en esta sección..
No puede actualizar las variables del preprocesador basadas en consultas de medios. Para que un sitio sea receptivo, debe cambiar los valores según las dimensiones de la pantalla. Las variables del preprocesador no pueden hacer eso. Por ejemplo, considere el siguiente código:
$ artículo-margen: 1em 0.5em; @media (ancho mínimo: 1024 px) $ artículo-margen: 2em 1em; .my-article margin: $ article-margin;
Se compilará para:
.mi-artículo margen: 1em 0.5em;
Como puede ver, la asignación dentro de la consulta de medios se ignora por completo. Por otro lado, las variables CSS respetarán esta asignación dentro de una consulta de medios.
Del mismo modo, las variables del preprocesador ni en cascada ni heredan. Usando variables nativas, puedes eliminar todas estas limitaciones. Una ventaja más importante del uso de variables nativas es que son interoperables. A diferencia de las variables Sass, que funcionarán solo con Sass, las variables nativas funcionarán no solo con todos los preprocesadores, sino también en archivos CSS simples..
Para entender cómo usar las propiedades personalizadas de CSS, comencemos con un ejemplo básico:
: root --text-color: carmesí; .my-section color: var (- color de texto, negro);
Cada vez que defina una propiedad personalizada, comenzará por definir su alcance. El ámbito determina los nodos DOM a los que podría estar disponible la propiedad personalizada. Utilizando :raíz implica que la propiedad personalizada está disponible para todos los elementos. Tenga en cuenta que todas las propiedades personalizadas deben comenzar con dos guiones.
Si pretende utilizar una propiedad personalizada, deberá hacer referencia a ella con el var () función. Esta función toma dos argumentos; La primera es la propiedad personalizada en sí misma, y la segunda es un valor de reserva. El valor de reserva se utiliza cuando una propiedad personalizada no se declara en ninguno de los ancestros o si su valor no es válido.
Debe tener en cuenta que las propiedades personalizadas distinguen entre mayúsculas y minúsculas. Esto implica que --color de texto , --Color de texto, y --color de texto son todos diferentes.
Hay un par de cosas más que deben tenerse en cuenta al usar var ().
La primera es que los valores de reserva pueden estar separados por comas, y en el caso de valores abreviados como el margen, no es necesario separar los valores individuales con una coma. Por ejemplo, var (- para-font-family, "Lato", "Roboto"); establece el valor de reserva como "Lato" "Roboto";. De manera similar, una reserva para propiedad de borde se verá así:
a border: var (- link-border, 1px dotted brown);
La segunda es que no puede usar variables como nombres de propiedades. El siguiente código arrojará un error en la segunda declaración..
h1 --my-size: font-size; var (- mi tamaño): 2em;
Con lo básico cubierto, veamos cómo podemos construir valores a partir de propiedades personalizadas. Si ha asignado un número desnudo a una variable, no podrá agregarlo directamente a alguna unidad para obtener un valor válido. En resumen, el siguiente código no es válido:
.cita --t-padding: 20; padding-top: var (- t-padding) px; // no funcionará
Tendrás que usar el calc () Función para realizar algunos cálculos y construir valores CSS finales. Para hacer que el código anterior funcione, tendrá que modificarlo para que se vea así:
.cita --t-padding: 20; relleno superior: calc (var (- t-relleno) * 1px); // Trabajará
No estás limitado a solo px unidades. Puedes usar todas las unidades válidas que están disponibles en CSS.
Las variables CSS nativas también pueden interactuar con JavaScript. Para obtener sus valores, puede utilizar el siguiente código:
Accentsconagua
var styles = getComputedStyle (document.documentElement); var bgValue = String (styles.getPropertyValue ('- background')). trim ();los recortar() eliminará los espacios en blanco de ambos extremos de su valor.
Si desea establecer el valor de una propiedad personalizada, deberá utilizar el setProperty () método.
document.documentElement.style.setProperty ('- background', 'black');los --fondo La variable ahora es negra. También puede configurar una propiedad personalizada para referirse a otra usando la var () función.
document.documentElement.style.setProperty ('- h-color', 'var (- p-color)');La declaración anterior es completamente válida y establece el valor de --h-color igual a --p-color.
Las variables pueden proporcionar mucha flexibilidad cuando se trata de cambiar temas según las preferencias de un usuario. Anteriormente, tenía que usar el estilo en línea o crear varias hojas de estilo. Ambos métodos tienen sus propios deméritos. Crear múltiples hojas de estilo es un dolor de cabeza, y usar un estilo en línea es una mala práctica. Las variables pueden proporcionar una salida fácil en esta situación. Aquí hay algunos JavaScript básicos para cambiar temas dinámicamente:
document.getElementById ("greenish"). addEventListener ("click", greenTheme); function greenTheme () var greenShades = document.documentElement.style; greenShades.setProperty ('- theme-font', 'Dosis'); greenShades.setProperty ('- heading-background', 'hsl (90, 70%, 60%)'); // Establecer más valores de este tipo El código anterior adjunta un evento de clic a nuestro botón de tema. Tan pronto como alguien haga clic en él, la función Tema verde () establece los valores de algunas variables para cambiar el aspecto general del sitio web. Como puede ver, este método fue mucho más fácil de implementar que las otras dos soluciones..
Puede intentar agregar algunas variables más o crear más temas en esta demostración de CodePen.
El tutorial parece sugerir que las variables CSS nativas son superiores a las variables en preprocesadores como Sass, pero no estoy menoscabando la utilidad de los preprocesadores. El uso de varios preprocesadores de CSS aumenta la productividad. Tienen mucho más que ofrecer que solo variables. Numerosas funciones integradas, bucles y sentencias condicionales pueden hacer las cosas rápidamente.
Este tutorial simplemente señala que incluso si las variables nativas tienen una sintaxis extraña, aún tienen mucho más que ofrecer y vale la pena utilizarlas en sus proyectos. Si tiene alguna pregunta sobre este tutorial, hágamelo saber en los comentarios..
