Variables

Captura de Pantalla 2020-09-02 a la(s) 15.10.24.png

Alejandro Jesus Hermitaño Ychpas

La verdad que cada clase mas aprendo mucho mas, realmente se merece llevar el nombre de “Definitivo”.

Joel Dominguez Merino

En la clase de hoy vimos el tema de Variables Si, Variables en CSS.

Para que nos sirven?
Nos servirán para guardar valores que reiteradamente ocuparemos en el desarrollo de nuestro proyecto. Realmente se le ve mas utilidad en proyectos grandes. Pero claro, es importante conocerlo desde ahora.

Como se declara?
Normalmente se declara dentro de :root ta que serán variables globales.
y se declaran de la siguiente manera:

:root {
  --primary-color: #322f3d;
  --secondary-color: #8d93ab;
  --font-color: white;
  --font: 1.8rem;
  --titles: 3rem;
}

Indicando con – (Doble guión) y seguido del Nombre de la variable y el **valor **que este tendra.

Como utilizar las variables?
Se utilizaran las variables gracias a la Función var() y se usa de la siguiente manera.

header {
  background-color: var(--primary-color);
  width: 100%;
  height: 10rem;
  color: var(--font-color);
  font-size: var(--titles);
  text-align: center;
}

Espero les guste el mini resumen. Saludos 😃

Efraín Hernández García

Recomiendo mucho la página de colors Para jugar con paletas de colores

Jesús Miguel Quinto Teran

Nota:

Adicionalmente var() tambien puede recibir un valor por defecto en caso de no poder encontrar la variable.

var( <custom-property-name> , <declaration-value>? )

<h1>Ejemplo:</h1>

:root {
 --base-gray: #273b47
}

body {
	color: var(--base-gray, gray)
}

Iván Arcos

También funcionan las variables al aplicar márgenes:

Héctor Alonso Padilla Ramírez

La pseudoclase :root hace referencia al elemento raíz del documento, o lo que es lo mismo, al elemento <html>. La diferencia de utilizar html o :root como selector es que este último tiene algo más de especificidad CSS. Mientras que html tiene 001, :root tendría 010.

Al colocarla en :root estamos definiendo que la custom property estará definida para el ámbito de esa etiqueta <html> (o cualquier elemento hijo), es decir, a todo el documento.

Definir una variable CSS

Joel Carrion

El mayor beneficio que yoo le veo esque te acorta mucho tiempo y no son complicadas
aqui les dejo un link para quienes queiran investigar mas
https://developer.mozilla.org/es/docs/Web/CSS/var

Cristobal Nyram

Tomando como analogía lo que dijo Diego de Granda,root es como un arbol que hara que nuestras valriables se hereden en todo nuestro proyecto.

Obed Paz

Las variables CSS se comportan como propiedades, porque tienen herencia y tienen cascada.
Por eso se le llaman Custom Properties, además de que no se pueden declarar fuera de un selector.

:root{ 
  --color: red; 
    background: var(--color); 
}

Declarando las variables en el root, hacemos que esas variables sean globales y puedan ser usadas a lo largo de todo el proyecto.

–

Nota: Las variables en CSS son case sensitive. Es decir, cuando recuperamos su valor, debemos escribir el nombre tal y como lo declaramos. Es curioso porque las propiedades CSS no son case sensitive (aunque la buena practica sea siempre escribirlas en minuscula). Entonces podemos decir que solo las propiedades personalizadas (en este caso las variables) si son case sensitive.

Bryan Imbaquingo

aquí les dejo mis apuntes de todo el curso hasta esta clase

apuntes CSS

está todo desde lo que se vió al inicio en HTML

William Camilo Guzmán Espitia

Documentación complementaria: https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties

Edgar Reyes Salazar

Cuando usan el lorem el comando Alt + z hace un ajuste en la línea, me refiero a que salte de línea

Fabian Flores

Notas de la clase

Anthony Ismael Manotoa Moreno

Platzi Team

Guarda valores que siempre usamos en los estilos para no repetir el mismo código a cada rato.

Se guardan en :root {}. Se escriben así: --nombreVariable: valor;.

Para llamarlas se pone en el valor de la propiedad: var(--nombreVariable);.

:root {
  --primary-color: #003476;
  --secundary-color: #b4d2f7;
  --header-size: 4rem;
  --font: 1.8rem;
}
h1 {
  font-size: var(--header-size);
  color: var(--primary-color);

Kevin Franco Ricardo

Había visto otros cursos de CSS y HTML antes, pero en ninguno mencionaron siquiera la existencia de variables. Estoy muy satisfecho con el contenido visto hasta ahora en el curso, he aprendido mejores practicas de desarrollo así como también he prestado mucha atención a ciertas practicas que no son recomendadas. Solo me queda dar las gracias a Diego De Granda y al equipo de Platzi que han hecho posible este curso.

Aldo Miguel Ortiz Parodi

38. Mis apuntes sobre: “Variables (custom properties)”

Debemos crear las variables en el root del css, porque hace referencia a todo el HTML.

Por si no ven el potencial: Imaginen que quieren cambiar todos los colores de su web, solo cambian los valores de las variables, y TODA su web cambiará de color, en vez de tener que hacerlo en todo el inmenso CSS que tengan, por eso vale la pena.

Les comparto el código CSS de la clase:

:root {
    --primary-color: #003476;
    --secundary-color: #b4d2f7;
    --header-size: 4rem;
    --font-size: 1.8rem;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
.header {
    width: 100vw;
    height: 15vh;
    background-color: var(--primary-color);
}
.main {
    width: 100vw;
    height: 70vh;
    font-size: var(--font-size);
}
.main-title {
    font-size: var(--header-size);
    color: var(--primary-color);
}
.footer {
    width: 100vw;
    height: 15vh;
    background-color: var(--secundary-color);
}

Gerardo Salvador Jacobo Mejia

wow la verdad me gustaría que todos los cursos de platzi tuvieran esta calidad e reforzado algunos temas para entender mas pero este es un gran profesor ✌

Juan Felipe Sánchez Arango

Diooos que increíble me gusto mucho, gracias ❤️. Todo esto me servira para mi vida, y sin duda no me arrepiento de invertir en mi futuro con Platzi son lo máximo.

Donny Daniel Vásquez Ramos

Ya tengo todo el CSS con variables. Incluso metí en una variable todo el estilo de unas sombras, así:

  /* Sombras */
  --shadow-sm-dark: 0 0 0.75rem -0.35rem rgba(0, 0, 0, 0.25);

Queda genial porque ahorro 50% en cada sombra.

Acá les dejo el sitio:
https://donnyvasquez.github.io/Curso-definitivo-de-HTML-y-CSS/blog/

Captura de pantalla 2021-05-17 a las 8.47.42 a. m..png

michael esteban solarte moran

hace 9 meses

las variables son importantes para la actualización de una pagina después de pasar un tiempo, si el branding de una marca cambia, solo cambias un par de variables y todo el tema de tu pagina web puede cambiar

Fernando Molano Castrillón

A mi me gusta usar este website para buscar paletas de colores:

(https://colorhunt.co/)

jazminlizette

Comparto los apuntes de la clase 😃

Alex Arevalo

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

La pseudoclase :root CSS coincide con el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento <html> y es idéntico al selector html, excepto que su especificidad es mayor.

Keneth Lopez

Apunte de la clase: Variables en CSS

Usualmente se declaran las variables dentro de “root” que hace referencia a la etiqueta “html” y por ende las declara de manera global.

Sintaxis

:root{
	--my-variable: valor;
}

Ejemplo

:root{
	--color-parrafo: green;
}
p{
	color: var(--color-parrafo); font-weight: bold;
}

<p>Hola me llamo Keneth y soy Ingeniero de Sistemas</p>

Añadir un valor predeterminado

:root{
	--color-parrafo: green;
}
/*red será el valor predeterminado, este se aplicará si no se detecta la variable (en este caso está mal escrito)*/
p{
	color: var(--color-parrafomsa, red); font-weight: bold;
}

<p>Hola me llamo Keneth y soy Ingeniero de Sistemas</p>

Juan Fernando López Hernández

Hola, este es mi aporte.

Santiago Rodriguez Chaves

El uso de variables es indispensable en proyectos grandes con lineas de codigo muy largas y nos evita caer en errores al manejar diferentes tipos de tamaños de fuentes o diferentes colores.

:root {
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #4c4d4c;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --gray-green: #989c99;
    --H2-titles:#52575c;
    --button-content:#c2c7cc;
    --sm: 1.4rem;
    --md: 1.6rem;
    --lg: 1.8rem;
}

aca dejo como ejemplo las variables que estoy usando en mi proyecto actual.

Ixchel Garcia

El principal aporte que veo al implementar variables es el mantener de forma sencilla la uniformidad del código reutilizando una variable muy intuitiva a lo largo de tu css. Sin duda alguna esta ha sido una de mis clases preferidas! Esto en verdad ayuda a hacer más dinámico el proceso de construcción de un layout.

Gabriel Rodriguez

Desde que empecé este curso ya no me mareo ni me vuelvo loco al leer código. Claro que los proyectos del curso son pequeños, pero de igual forma. Cada vez se hace más familiar ubicar etiquetas, selectores, darnos cuenta lo que nos está j#diendo el proyecto y corregirlo. Esto no tiene ningún tipo de relevancia, pero quería compartirlo de todos modos 😃

Cristian Gómez

¿Por qué no darle al html un font-size: 10px, en lugar de un porcentaje que puede variar por browser?

Anthony González (@ThonnyGeek)

Anotaciones:

eduk2

¿Qué ocurre cuando tienes muchos ficheros .css?
¿Alguna buena práctica para tener las variables en 1 solo fichero y que todos los .css obtengan el valor de las variables de ahí?
Gracias

Pablo Aquino

:root{ /* el hace referencia al html */
	--variable: value;
}
selector{
	property:var(--variable);
}

Las variables nos permiten reutilizar código y estandarizar algunas valores como los colores, fuentes, etc.

Anderson Josué Oroya Silva

No sabía lo de las variables. La verdad ahorra muchísimo tiempo y además asegura que se mantengan los estilos en nuestra página.

Jesús Romero Rivera

La mayoría de preprocesadores tienen esa opción, o forma de crear variables de una forma más intuitiva. Yo uso less, y las variables se crean con un @[nombre]: valor. Y ya está

user_deleted_1572741

🤔 Las variables CSS permite almacenar un valor para referenciarlo en varios lugares.

Axel Herrera

hace 5 meses

Les comparto una pagina donde pueden ver diferentes diseños de botones y copiarlos a su codigo
https://cssbuttons.app/

Zoe Valentina Zapotoczny

hace 5 meses

Les comparto una gran página que a mi me ha ayudado mucho con lo que son paletas de colores. Vienen ya armadas y con los códigos en hexadecimal para que lo pongas en tus code, además hay muchísima variedad de paletas: Color Hunt.
Besitoos

Percy Tejada

Si están buscando en los recursos la carpeta claseVariables esta se encuentra dentro de la carpeta clasePseudoClases. Igual aquí les comparto el código de esta clase.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header></header>
    <main>
        <h1>Soy un titulo</h1>
        <section>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, at esse? Atque accusamus eum explicabo. Enim nulla impedit neque est!
            </p>
        </section>
    </main>
    <footer></footer>
</body>
</html>

style.css

:root {
    --primary-color: #003476;
    --secundary-color: #b4d2f7;
    --header-size: 4rem;
    --font: 1.8rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

header {
    width: 100vw;
    height: 15vh;
    background-color: var(--primary-color);
}

main {
    width: 100vw;
    height: 70vh;
    font-size: var(--header-size);
}

h1 {
    font-size: var(--header-size);
    color: var(--primary-color);
}

footer {
    width: 100vw;
    height: 15vh;
    background-color: var(--secundary-color);
}

Roberto Pablo Almanza Cabrera

Si usas variables, puedes simplemente cambiar el valor de una variable y cambiará la propiedad en donde hayas puesto esa variable. Sirve mucho para ahorrarte trabajo en estar buscando cada color quieres modificar. Por ejemplo una empresa de dice que por navidad reemplazaran el color azul por el rojo, entonces tú solo modificas el valor de tu variable de azul y rojo y listo!!!.

Anggi Vanesa Pallares Solis

Nota: Los nombres de propiedades personalizadas son case sensible (distinguen entre mayúsuculas y minúsculas) — --my-color será tratado como una propiedad personalizada distinta a --My-color.

Isaac Alejandro Soto Henríquez

cuando inicie tenía mis dudas del nombre del curso, pero se lo merece al 100%.
CURSO DEFINITIVO DE HTML Y CSS

Juan Pablo Jimenez

42.-Variables

Es posible usar variables en CSS en donde podemos guardar un valor que podemos reutilizar en nuestros estilos, así evitamos escribir código repetido.

Lo hacemos mediante:

:root{} →Que siempre hace referencia a nuestro html. Aquí es donde se declararán variables.

Nestor Beltran

Ojo si en sus proyectos aun les piden soportar IE css vars no funciona je nos paso https://caniuse.com/css-variables

JOEL LUCIO GÓMEZ ROMERO

No es mejor usar directamente stylus o algún otro preprocesador? siento que el código crece y se hace mas complejo usando de esta forma las variables

Sergio Andrés Bolaños Penagos

Sí había visto el tema de las variables en videos de youtube antes pero nunca me animé a utilizarlas, creo que lo voy a hacer de ahora en adelante!

Victor Andres Castillo Zambrano

buenísimo

Jonathan Estiven Becerra Pedrozo

Genial! variables<3

Xavier Orlando Serna Puma

Las utilizamos para cosas que vamos a estar re utilizando constantemente en nuestro proyecto, como nuestro color primario, secundario o terciario; nuestro tamaño de fuente y color de fuente; tamaño de encabezados

Son mayormente usadas cuando tenemos proyectos grandes, para no confundir nuestro valores los estandarizamos con variables que rehusamos, así evitamos discrepancias de colores o tamaños de fuente.

ROOT: Nuevo elemento de CSS para generar variables:
:root {}
El root hace siempre referencia a nuestra etiqueta <html>. Es como el punto de partida de nuestro proyecto. Dentro del root declaramos nuestras variables.

Las variables se construyen con el siguiente formato:
–nombre-variable: valor;

Julián Imá Kherí Rentería Torres

El profesor menciona que el

:root { }

siempre está apuntando a nuestra etiqueda HTML, por lo que si se colocan la variables en el apartado de

html {
	font-size: 62.5%;
	--primary-color: #003476;
	--secondary-color: #64d2f7;
	--header-size: 4 rem;
}

también debería funcionar.

Ivan de jesus Romero leal

hace 4 meses

Woaaaa que buenas son las variables, me encanto esta clase, dato curioso, puedes ponerle cualquier nombre, por ejemplo “–pajaro: 100vh;” y igual va a servir

Davis Bremdow Salazar Roa

Variables en CSS

¿Por qué utilizar propiedades personalizadas o variables?

Para responder a esta pregunta es necesario formular otra pregunta: ¿Qué pasa cuando se tiene una gran cantidad de líneas CSS? Una de las situaciones más comunes es la repetición de valores para las propiedades como color: #ff9 se repitan.

En caso se requiera cambiar una de las propiedades repetidas, es necesario buscar dichos valores globalmente debido a que la misma propiedad CSS se encuentra en diferentes archivos, se puede evitar todo este proceso si se utilizan variablesque permite realizar dicho cambio desde un solo lugar (en la definición de la variable)

¿Qué son?

Definidas como propiedades personalizadas (las define el usuario/programador), las variables en CSS nos permiten establecer propiedades reutilizables, que se ocuparan reiteradas veces, en el desarrollo de un proyecto.

Creación

Para su creación es necesario definir el

nombre de la propiedad
valor de la propiedad

Para poder llamar a la propiedad registrada es necesario utilizar la función var(--nombre-propiedad)

¿Dónde definimos las variables?

Estas nuevas propiedades se pueden definir dentro en:

pseudo-clase :root
selector css

Ejemplo

:root{
	/* Definición de las variables */
}
section{
	--pdd-box: 4rem;
	padding: var(--pdd-box);
}

Restricciones para el nombre de las variables

Los nombres de las variables deben tener las siguientes características.

Deben iniciar con el prefijo --(dos guiones)

Los nombre son Case sensitive (distingue entre mayúsculas y minúsculas)

Ejemplo

:root{
	--nueva-propiedad: value;
	--color-uno: value1;
	--color-Uno: value2;
}

En este ejemplo el --color-uno es diferente de --color-Uno

Valores por defecto

Otra funcionalidad de las variables es que se puede definir un valor en por defecto en caso aun no se defina la propiedad personalizada o variable.

Funcionamiento

Los valores por defecto utiliza la función var() haciendo uso de 2 parámetros

Nombre de la propiedad.
Valor por defecto.

var() solo puede aceptar un máximo de 2 argumentos.

Definición

selector{
	var(<nombre_propiedad>, alt_value);
}

Ejemplo

p{
	color: var(--my-var, red)
}

Establece un valor del color desde la variable --my-var y un color rojo en caso la variable no este definida.

Ejemplo general

/*
	EJEMPLOS
	--nombre-propiedad: valor;
*/
:root{
	--primary-color: #ff0;
	--secondary-color: #0ff;

	--title-size: 3.6rem;
	--pdd-20: 2.4rem;
}

Valores erróneos

En ocasiones se definen valores incorrectos a las variables creadas o se asigna un valor incorrecto a un determinada propiedad css, lo que lleva a preguntarse.

¿Qué pasa con los valores inválidos?

Cuando el navegador encuentra una sustitución inválida con var(), se usará el valor inicial o heredado.

Donny Daniel Vásquez Ramos

Dios santo! Qué cosa juedteee.

Captura de pantalla 2021-05-17 a las 8.40.29 a. m..png

Santiago Velandia Gallo

hace 9 meses

Super interesante todo lo que podemos hacer en css, siento que me quedo corto pero supongo que es cuestión de empezar a practicar mucho… siempre decía que prefería el back-end pero ahora creo que prefiero ser fullstack y enfocarme más al front-end ya que me gustó bastante.

Andrés Mejía López

hace 10 meses

Giselle Gachagoque

Excelente es una gran ayuda en cualquier proyecto.

Cristopher Joshua Rivas Sanjines

Las variables nos ayudan a simplificar nuestro trabajo en el prototipado. Estas variables irán a dentro del selector root:
El root hace referencia siempre a nuestro html. Se escribe de la siguiente manera:
§ :root{
–primery-color: #003476;
–secundary-color: #0034c6;
}
Para llamar a la variable a un selector la sintaxis es la siguente:
§ Container{
Background-color: var(–primery-color)
}

Vittorio Carlos Toledo Huarez

Hola chicos.
Les comparto la siguiente página de abode para que puedan combinar , probar y jugar con diferentes colores aplicando reglas de armonía de color como análogos, cuadrados, compuesto, entre otros.
https://color.adobe.com/es/create/color-wheel

Andres Salazar

Les dejo mi resumen de clase y un ejemplo utilizando el mismo HTML del video y el uso de variables. Coloqué el valor de main como un “resultado” de restar el alto de la ventana con lo que tiene de alto el header más lo que tiene de alto el footer. De cierto se vuelve “dinamico” el alto del contenido de la página. puede ver el resultado renderizado desde esta página

CSS

:root {
	/*el selector :root es el punto de partida del documento, al escribirlo del modo que está acá hace referencia a la etiqueta html y es donde se deben colocar las variables*/
	--primary-color: #003476;
	/*--primary-color es la forma de generar una variable llamada primary-color*/
	--secondary-color: #b4d2f7;
	--header-size: 3.5em;
	--font: 18px;
	--heigth-header: 20vh;
	--heigth-footer: 15vh;
	--heigth-main: calc(100vh - (var(--heigth-header) + var(--heigth-footer)));
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

header {
	background-color: var(--primary-color);
	/*var (--nombre-de-variable) es la forma de utilizar las variables creadas desde el selector :root*/
	height: var(--heigth-header);
	width: 100vw;
}

main {
	width: 100vw;
	height: var(--heigth-main);
	font-size: var(--font);
}

h1 {
	color: var(--primary-color);
	text-align: center;
	font-size: var(--header-size);
}
footer {
	background-color: var(--secondary-color);
	width: 100vw;
	height: var(--heigth-footer);
}

Juan Isaac Salazar Meza

Creo que el principal beneficio es la organización. No andar repitiendo valores y tener una consistencia.

Antonio Rafael González Ferrer

Aquí igual aplicaría una variable para el width e incluso dos para los height! Excelente material 😎

MatiLeonel

para crear una variable en css, escribo:

:root { --nombre-de-la-variable: valor; }

Oscar Felipe Gomez

La clase mas reveladora del curso, y no es por demeritar las otras.

Edison Manrique

Sintaxis para crear variables:

Sintaxis para llamar a esas variables:

Carlos Arturo Cruz Gutierrez

Elio Omar Cadiz Meza

Excelente clase, no sabia que se podían usar variables en CSS… esto me permitirá llevar un mejor control en los diseños de mis proyectos. les comparto aquí mi código por si alguien tuvo problemas con la ejecución y necesita compararlo, por que a mi si me sali bien 😃

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
:root{
    --primery_color: coral;
    --segundary_color: rgb(233, 224, 149);
    --header_size: 4rem;
    --font:1.8rem;
}
header{
    width: 100vw;
    height: 15vh;
    background-color: var(--primery_color);
}
main{
    width: 100vw;
    height: 70vh;
    font-size: var(--font);
}
h1{
    font-size: var(--header_size);
    color: var(--primery_color);
}
footer{
    width: 100vw;
    height: 15vh;
    background-color: var(--segundary_color);
}

Axcel Javier Rincón Gomez

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Variables</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header></header>
<main>
<h1>
Soy un Titulo
</h1>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse magni delectus officia ratione, repellendus quos maiores eum atque asperiores necessitatibus omnis cupiditate soluta fugit voluptates numquam, beatae perferendis eos sunt?
Fugit ut minus perferendis eum corporis, sapiente, magni sequi provident quis iure facere rem possimus tempora. Iure maiores architecto earum quibusdam hic fugit ab reiciendis eaque, sapiente, nesciunt reprehenderit molestias?
Eligendi deleniti voluptas reprehenderit, ex sint voluptatum beatae exercitationem autem, tempore quaerat mollitia consequuntur ut ducimus possimus facilis quia iusto id praesentium! Veniam aspernatur reiciendis cum quam iure tempore quod!
Deserunt odit esse nobis libero eaque repellat atque et unde enim dolor quaerat voluptatum voluptatem, autem sint dicta explicabo ex quo, commodi aliquam iusto! Provident, dolores cumque! Totam, dolor dignissimos!
</p>
</section>
</main>
<footer></footer>
</body>
</html>

:root {
–primary-color:#003476;
–secundary-color:#b4d2f2;
–tercero-color:yellow;
–header-size:4rem;
–font:1.8rem;

}

{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;/ siempre debe ser*/
}
header {
width: 100vw;
height: 15vh;
background-color:var(–primary-color);
}
main {
width: 100vw;
height: 70vh;
font-size: var(–font);
}

h1 {
font-size: var(–header-size);
color:var(–secundary-color);
display: flex;
justify-content: center;
}

section {
width: 150vw;
height: 25vh;
background-color:var(–tercero-color);

}
footer {
width: 100vw;
height: 15vh;
background-color:var(–secundary-color);
}

Kevin Andres Curruchich Xocop

Según yo sabia lo basico de HTML y CSS, pero ahora me di cuenta que no sabia nada 😭😭

Misael Jafet Perez Carcache

WOW imagina tener una paleta de colores que es lo comun para un proyecto… Esto es de locos me encanto.

Rocio Salgado

Me encanto esta clase es muy util!!!

Orangel Jose Gonzalez Urbina

https://developer.mozilla.org/es/docs/Web/CSS/var

Las variables se declaran en el :root {
}

Anderson Álvarez

hace 9 días

Me gusta como explica el profe Diego. Es un genio.

Jonathan Fernando Ramirez Valencia

hace 16 días

Ricardo Alfonso Chavez Vilcapoma

hace 16 días

Las variables deben tomar como nombre su función:

Ejm: --background-color-nav:green;
–font-size-p:2rem;

Lenin Augusto Chavez Silva

hace 21 días

Con anticipacion te brindan documentacion para profundizar aun mas en el tema impartido.

Lenin Augusto Chavez Silva

hace 21 días

Mateo Paloma

hace un mes

La verdad super fácil, ya me preguntaba si css tenia algo así.

nairo ramiro torres zambrano

hace 2 meses

Se deberian llamar constantes.

Carlos Ramos

hace 2 meses

Clase 42 - Variables

¿Qué son los custom properties o variables?

Son espacios en donde podemos almacenar código que vamos a repetir mucho en nuestros proyectos.

¿Cómo usamos variables en CSS?

Para usar variables de CSS debemos situarnos al inicio de nuestro documento CSS y usar el elemento root de la siguiente manera:
Sintaxis:

:root
{

}

Dentro de este selector es donde escribiremos nuestras variables y para escribirlas debemos de hacerlo de la siguiente manera:
Sintaxis:

:root
{
    --primary-color: #003476;
    --secondary-color: #b4d2f7;
    --header-size: 4rem;
    --font: 1.8rem;
}

Como vemos para crear variables debemos de escribir dos guiones (–) y seguido de ellos escribimos el nombre de la variable y finalmente su valor.
Para usarla en algún momento debemos usar el valor var() y dentro del paréntesis debemos escribir el nombre de la variable de la siguiente forma:
Sintaxis:

h1
{
    font-size: var(--header-size);
    color: var(--primary-color);
}

¿Hacía donde hace referencia el selector :root?

Al elemento <html>.

¿Cuáles son los usos más comunes que le podemos dar a las variables como desarrolladores frontend?

Colores.
Tamaño de fuentes.
Fuentes.

¿Cuándo le vamos a sacar provecho a las variables como desarrolladores frontend?

Cuando estemos en proyectos grandes.

Ian Exequiel Marchisio

hace 2 meses

En CSS, una variable es un valor que se puede reutilizar en diferentes partes de un archivo CSS o en varios archivos CSS. Las variables se definen con el símbolo – seguido del nombre de la variable y su valor. Por ejemplo, se puede crear una variable llamada --main-color con el valor red:

:root {
    --main-color: red;
}

Una vez que se ha definido una variable, se puede utilizar en cualquier parte del archivo CSS o en varios archivos CSS, mediante la utilización de la sintaxis var(–nombre-de-la-variable). Por ejemplo:

.header {
    background-color: var(--main-color);
}

En este ejemplo, el fondo del encabezado será rojo, ya que estamos utilizando la variable --main-color que definimos anteriormente con el valor de red.

En resumen, las variables de CSS son una forma de almacenar valores comunes que se pueden reutilizar en varias partes de un archivo CSS o varios archivos, con el objetivo de reducir la repetición de código, facilitar el mantenimiento, y poder cambiar el valor de una sola vez en todas las partes donde se utiliza.

Enrique Berrones

hace 3 meses

Me gustan mucho las variables, antes las usaba en SASS
Esta página me ha ayudado a entender los tamaños mas que nada de fuentes y organizarlos mejor
Utopia

  :root {
        --step--4: clamp(0.40rem, calc(0.39rem + 0.44vw), 0.74rem);
        --step--3: clamp(0.58rem, calc(0.47rem + 0.64vw), 0.96rem);
        --step--2: clamp(0.69rem, calc(0.55rem + 0.84vw), 1.20rem);
        --step--1: clamp(0.90rem, calc(0.68rem + 1.45vw), 1.70rem);
        --step-0: clamp(1.00rem, calc(0.74rem + 1.46vw), 1.88rem);
        --step-1: clamp(1.20rem, calc(0.87rem + 1.91vw), 2.34rem);
        --step-2: clamp(1.44rem, calc(1.01rem + 2.48vw), 2.93rem);
        --step-3: clamp(1.73rem, calc(1.16rem + 3.22vw), 3.66rem);
        --step-4: clamp(2.07rem, calc(1.34rem + 4.17vw), 4.58rem);
        --step-5: clamp(2.49rem, calc(1.54rem + 5.39vw), 5.96rem);
    }

Facundo Peralta

hace 3 meses

Que cosa hermosa las variables. la verdad que es algo que me ha cambiado la forma de ver CSS.

Oscar Alexánder Ortiz Beltrán

hace 3 meses

Para complementar e incluso tener el conocimiento de que esta función dentro de su sintaxis puede tener un segundo parámetro:

Victor Azarel Cruz Mendoza

hace 4 meses

Beneficios:

Previene errores, falta de consistencia y garantiza una redundancia correcta y controlada.
Podemos enlistar en un bloque de código la mayor parte de las especificaciones de estilo del proyecto.

Duda existencial: se seguirá usando cuando use preprocesadores?

John Alassio

it’s really cool when you’re working in a team with designers who are doing a job, and then you want to modify or show them a variety or something like that, you can have the same detail in the variable to reuse it; I loved it, the fact is that if we could do that in art everything would be easier but luckily it isn’t! and there are geniuses and not so geniuses who try to copy them jaja

hrenatogiron

Diego Alejandro Moreno Pedroza

Pro tip!!!
Con ctrl + z ajustan el texto para que vean el contenido sin tener que dar scroll horizontal

Yasmil Gonzalez

Las variables CSS son case sensitive.distinguen entre mayúsculas y minúsculas,
Una ventajas de usar var() es que hace que sea mucho más fácil cambiar los valores
Los dos guiones ( – ) que aparecen delante dicen al CSS que esta propiedad es una variable para que el navegador sepa que ese nombre es una propiedad personalizada.

Evander Nassem Ramírez Hernández

Primera vez usando variables en CSS y me encantaron!!

Alvaro Garcia

Variables

Usamos las variables en CSS cuando tenemos que reutilizar estilos múltiples veces. Esto se suele hacer en proyectos grandes ya que se puede volver más tedioso tener que buscar los estilos para reutilizarlos.

Esta es la forma en la que creamos variables en CSS:

Y Así las aplicamos a un elemento HTML:

Nathalia Maya

Las variables son denominaciones fijas que se le dan a valores de algunas propiedades que se pueden repetir frecuentemente durante un proyecto.

Cristian Acevedo

muy bueno lo de la variable no lo sabia

RRHH Holistor

lo mejor de las variables, es que al momento de modificar un color dentro de la pagina, solo debes modificar una linea de código y pooomm, caso resuelto.

Sebastián Caraballo Marzola

![](

Rodri Varela

UF! Esto es excelente, ahora se hace todo mucho mas fácil!

Franklin Meléndez

que buena clase, me esta siendo muy útil el tema de las variables.
muchas gracias!!!

Juan Esteban Carrillo

Me gusta mucho lo de las variables, en proyectos anteriores me había tocado revisar el código de arriba, y ademas tenia todos los tamaños de fuentes diferentes.

Joan Daniel Leon Laguna