Guía de principiantes para variables CSS (propiedades personalizadas de CSS)

Una característica que ha estado en las listas de deseos de CSS mucho antes de convertirse en un estándar son las variables CSS, oficialmente llamadas propiedades personalizadas de CSS. Las variables CSS han sido un estándar hace casi diez años y todos los navegadores modernos las han aceptado durante algún tiempo. Todos los desarrolladores deben usar esta función, ya que puede ahorrar mucho tiempo de codificación y mantenimiento. En este tutorial, cubriré los elementos básicos de la sintaxis de la variable CSS y luego pasaré por algunos de los mejores puntos del uso de variables CSS (o propiedades personalizadas), junto con algunos casos de uso prácticos.

Contenido:
CSS variable en preprocesadores #
Variables (propiedades personalizadas) en CSS nativo #
¿Por qué “propiedades personalizadas”? #
¿Dónde se definen las variables CSS? #
Notas técnicas sobre variables CSS #
Comprender la función lima () # #
Uso de variables CSS con calcio () #
Trucos con variables CSS #
La guía para principiantes para las variables #CSS (con ejemplos prácticos) ️
Haga clic en Tweet
Variables CSS en preprocesadores Preprocesadores CSS ha estado utilizando variables CSS durante más de 10 años. No entraré en detalles sobre estas opciones aquí, pero creo que es útil saber cómo cada una de las populares bibliotecas pre -procesador utiliza variables.
En Sass (o SCSS), declare variables de la siguiente manera:
$ TEMA Color: #CCCCCC; element1 {border: 1 px sólido $ theme-coloror; } .Element2 {Background-Color: $ Theme-Color; }
Lenguaje de código: PHP (PHP)
Observe el signo de dólar ($). La primera línea es la declaración de variable y su valor. Los dos bloques que siguen son ejemplos de las variables utilizadas más adelante en la hoja de estilo. Variables Les.js Use el símbolo @: @linkcolor: Firebrick; a, .link {color: @linkcolor; }
Y en las variables lápidas se ve así:
fuente- predeterminado = 14 PX Fuente del tamaño de la fuente del cuerpo- Predeterminado
Idioma de código: JavaScript (JavaScript)
Puede consultar las secciones de documentación individuales para cada uno de los pre -juicios presentados anteriormente si desea buscar las variables utilizando estas tecnologías de tercera parte.
Variables (propiedades personalizadas) en CSS nativo Esto nos lleva a variables CSS, o propiedades personalizadas, como se define en la especificación CSS. Para declarar una variable en CSS simple, coloque dos guiones frente al nombre personalizado que elija para una variable o propiedad, luego use la función var () para colocar ese valor donde quiera:
: root {-main: #030303; -Ccent: #5a5a5a; } .container {color: lima (-main); } .footer {border-color: lime (-main); } .Sidebar {color: lima (–accent); } .module {border-color: lime (–accent); }
Idioma de código: CSS (CSS)
En este ejemplo, definimos dos variables CSS: – -MAIN y – -CENT. Luego usé cada variable CSS en dos elementos diferentes, lo que demuestra la flexibilidad que abro.
Al igual que con las variables en cualquier lenguaje de programación, esto le permite declarar una variable en un solo lugar. Si desea cambiar ese valor más adelante en la hoja de estilo, es simplemente una cuestión de cambiar la declaración original y se aplicará a todos los lugares donde usa la variable. ¿Por qué “propiedades personalizadas”? En la conversación diaria, los desarrolladores a menudo se refieren a esta característica como “variables CSS”, de acuerdo con cómo los procesadores previos y los lenguajes de programación se refieren a la misma característica. Pero desde una perspectiva estrictamente técnica, no son realmente “variables”, sino que son propiedades personalizadas.
Tienen la misma sintaxis que cualquier propiedad predefinida en CSS, excepto los dos guiones que aparecen frente al nombre de la propiedad. Los dos guiones permiten a los autores CSS utilizar cualquier identificador interrumpido válido sin temor a conflictos con las propiedades CSS habituales. La especificación explica que solo dos líneas no son válidas (aparentemente reservadas para uso posterior) y CSS nunca dará sentido a ningún identificador silencioso válido más allá de su uso como una propiedad personalizada definida por el autor. A diferencia de las propiedades CSS habituales, las propiedades personalizadas tienen en cuenta la parte superior y en minúsculas. Esto significa que el color no es el mismo que es de color principal. Los caracteres válidos que se incluirán en el nombre de la propiedad personalizada son las letras, figuras, caracteres subrayados y guiones.
¿Dónde se definen las variables CSS? Como puede ver en el ejemplo que hemos proporcionado anteriormente, a menudo verá propiedades personalizadas CSS directamente definidas en el elemento raíz de un HTML o DOM DOC. Selector de pseudo-clase: root hace esto.: Root {-main: #030303; -Ccent: #5a5a5a; }
Idioma de código: CSS (CSS)
Pero las variables CSS no se limitan a ser definidas solo en el elemento raíz y a menudo es beneficioso definirlas en otro lugar. El selector: la raíz se elige comúnmente, ya que siempre se refiere al elemento más alto en el árbol DOM (ya sea el documento completo o de sombra).
En la mayoría de los casos, logrará el mismo resultado que define las propiedades personalizadas en el elemento HTML (que es el elemento raíz en los documentos HTML) o incluso en el elemento del cuerpo. Uso: Root permite que el código sea más resistente al futuro (por ejemplo, si la especificación en un día agrega un nuevo elemento como raíz, el CSS seguirá siendo el mismo) y suponga que también permite que una hoja de estilo se aplique Otro tipo de documento que tiene un elemento raíz diferente. Por ejemplo, el siguiente código limitaría sus propiedades personalizadas para su uso solo en .SideBar:
.Sidebar {-main: #030303; -Ccent: #5a5a5a; }
Idioma de código: CSS (CSS)
Para fines demostrativos, a menudo verá variables definidas en: raíz, pero puede usarlas donde sea práctica. De hecho, muchos desarrolladores recomiendan establecerlos a continuación en el árbol DOM para módulos más pequeños durante el desarrollo inicial, luego se dirige a: Root a medida que crea valores que tienen un dominio más grande.
Notas técnicas sobre las variables CSS Además de aplicar cualquier elemento, las variables CSS son bastante flexibles y fáciles de tratar. Aquí hay algunas cosas que vale la pena señalar: se resuelven con reglas ordinarias de herencia y cascada CSS
Puede usarlos en consultas de medios y otras reglas condicionadas
Puede definirlos en un atributo de estilo de un elemento
Se pueden leer o establecer utilizando las características del modelo de objeto CSS.
También vale la pena señalar que, en esencia, puedes abrazar las variables CSS. Observe el siguiente ejemplo:
: raíz {-Main-Color: LightBlue; -Neo-Color: var (-main-color); } Cuerpo {fondo: lima (-ew-color); }
Idioma de código: CSS (CSS)
Observe que definí una variable: color mayor, luego uso el mismo nombre de variable que un valor para la siguiente variable CSS.
¡También puede usar la palabra clave! Importante en un valor de la variable CSS, pero esto solo aplica la “importancia” de la variable misma en relación con otras definiciones de la variable y no con el valor que se usa en uno o más elementos en el documento. Si esto está confundido, aquí hay un ejemplo:
: raíz {-Main-Color: LightBlue! IMPORTANTE; -Main-color: naranja; } Cuerpo {fondo: lima (–main-color); }
Idioma de código: CSS (CSS)
En el ejemplo anterior, el color de fondo sería “azul claro”, incluso si la naranja aparece más tarde en las definiciones de variables. Pero el valor de fondo en el elemento del cuerpo no tendría importancia.
Las variables CSS también pueden contener valores de palabras clave a nivel de CSS, como inicialmente, heredar y USET, pero toda la propiedad no afecta las variables CSS (es decir, no se restablecen).
Comprender la función lima (). Ya ha visto la función var () utilizada en algunos ejemplos típicos de este tutorial de variable CSS. Pero es más en Lime () de lo que he cubierto hasta ahora. Primero, la función var () es válida solo en valor; Un nombre o selector de propiedad no puede usar una variable CSS. Además, un valor de consulta de medios no puede usar una variable CSS (p. Ej. La función var () toma dos argumentos: el nombre de la propiedad personalizada que se incluirá
Un valor alternativo donde la propiedad personalizada no es válida
Aquí hay un ejemplo en el que el segundo argumento tiene un efecto:

: raíz {-Main-Color: LightGreen; } Cuerpo {fondo: lima (-main-color, #ccc); }
Idioma de código: CSS (CSS)
Tenga en cuenta que en el código anterior escribí el nombre inicial de la variable usando la palabra británica o canadiense “color”, pero cuando utilicé la variable incorporé el “color” de ortografía estadounidense. Esto hace que la variable técnicamente sea inválida y, por lo tanto, el fondo gris simple (#CCC) tiene un efecto. También tenga en cuenta que un valor de repuesto puede contener sus propias comas. Entonces, por ejemplo, si su alternativa es una pila de fuentes, esta sería una forma válida de definirla:
: root {-Main-Font: Helvetica, Arial, Sans-Serif; } Cuerpo {Font-Family: var (-main-type, “Courier New”, consolas, monoespace); }
Idioma de código: CSS (CSS)
Observe nuevamente que mi variable tiene un defecto, declarando un desconocido, de tipo principal en lugar de-principal. Esto desencadena el valor de reserva, que es una pila alternativa de fuentes. Por lo tanto, todo después de la primera coma (incluso cualquier otra coma) es el valor de reserva. El uso de las variables CSS para parciales al definir una variable CSS, el valor que tiene no debe ser un valor CSS válido en sí; Puede ser un valor parcial que se puede usar como parte de un valor completo. Por ejemplo, puede romper una pila de fuentes:
: root {-Main-Font: “Franklin Gothic”; -Fallback-font: Gill Sans; -Generic-font: sans-serif; } Cuerpo {Font-Family: lima (–Main-Font), lima (–Fallback-Font), Lime (–Generic-Font); }
Idioma de código: CSS (CSS)
En este caso, cada uno de los valores de la variable funciona solo, pero demuestra la idea. Probemos un ejemplo más artificial usando la notación de color rgba ():
: raíz {-frba-roD: 25; –Fru-Green: 50; –fru-azul: 105; –frba-opacidad: 0.4; } Cuerpo {fondo: rgba (lima (-rgba-rojo), lima (–fraba-verde), lima (–ruga-blă), lima (-ardy-opacy); }
Idioma de código: CSS (CSS)
Puede ver cuán útil podría ser esto, lo que le permite “construir” valores dinámicamente.
El uso de variables CSS con calcio () Una de las formas útiles de incorporar variables CSS en sus proyectos está en combinación con la función Calc (). Como probablemente sepa, Calc () le permite realizar cálculos dentro de un valor. Entonces puedes hacer algo como:
elemento {ancho: calc (100% – 100px); }
Idioma de código: CSS (CSS)
Las propiedades personalizadas de CSS le permiten llevar () al siguiente nivel, por ejemplo, con dimensiones predefinidas. Ahmad Shadeed describió algo similar y aquí hay un ejemplo :: root {-size: 240; } .module {ancho: calc (lima (-size) * 1px); } .Module-sall {-size: 360; } .Module-medium {-size: 720; } .Module-Large {-size: 1080; }
Idioma de código: CSS (CSS)
En su lugar, puedo usar los conjuntos de reglas. Módulos y. Módulo-* Dentro de los interrogatorios de los medios, lo que me permite mostrar estos estilos condicionalmente para ciertas dimensiones de la ventana de vista u otras características de los medios. Los módulos pequeños/medianos/grandes tendrían las mismas clases que el módulo principal, pero solo el tamaño del módulo se sobrescribe según sea necesario. En el ejemplo anterior, el valor inicial de 240 para el tamaño actúa como un tipo predeterminado, pero podría pasar 240px como el segundo argumento en lima () para funcionar como una alternativa.
Trucos con variables CSS Varios desarrolladores tienen consejos y trucos compartidos utilizando variables CSS a lo largo de los años. No los extenderé en detalle aquí, porque es principalmente un tutorial para principiantes, pero aquí hay una breve descripción de algunos:
Como se mencionó anteriormente, puede usar variables CSS en estilos en línea, como en el caso de la relación de apariencia.
Un carácter espacial es un valor válido para una variable CSS, que le permite hacer un truco de encendido/apagado (por ejemplo, para algo como el modo oscuro), que puede leer en la publicación.
No puede escribir estilos de ciervo en estilos en línea, pero puede evitar esto usando variables CSS.
Las variables CSS ayudan a crear más fácilmente mediante SVG multicolores, como se subraya aquí. Puede crear sistemas de diseño prácticos y fáciles de mantener con variables CSS, expuestas en detalle en esta publicación.
Puede usar variables CSS para construir cuadrículas más eficientes y más fáciles utilizando funciones de diseño de cuadrícula, como lo describe Michelle Barker.
Subir
Conclusión Las variables CSS, o las propiedades CSS personalizadas, están listas para su uso hoy, con más del 90% de los navegadores utilizados a nivel mundial que aceptan esta característica en cuestión. Espero que esta discusión sobre los elementos básicos y de sintaxis lo alienta a considerar las variables CSS en los proyectos más recientes, si aún no lo ha hecho. Si el uso de variables CSS se ha limitado a algunos colores del tema global, tal vez este tutorial lo inspire a usarlas más y posiblemente venga con algunos de sus propios trucos. Ahora que ha terminado con las variables CSS, vea algunas de nuestras otras guías:
Apariencia de cuadrícula de CSS
Introducción a Parcel.js
Tutorial CSS Flexbox
Webpack para principiantes
Tutorial de micro-interacciones para desarrolladores para principiantes
Si tiene alguna pregunta sobre este tutorial de variables CSS, no dude en enviarlas a los comentarios a continuación.
Todo lo que necesita saber sobre las variables #CSS (con ejemplos prácticos) ️
Haga clic en Tweet
… Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress. Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%:
Apariencia y presentación de Chris Fitzgerald y Karol K.