Uso de Variables Custom en CSS para Optimizar Estilos
Contenido del curso
María José Ledesma
John Cardenas
Rosma Martínez
Alejandro Jesus Hermitaño Ychpas
Juan Christopher
Agustín Ravena
Joel Dominguez Merino
Daniela Díaz Graziani
Matías Wasiak
Efraín Hernández García
Jesus Velasco
Juan Christopher
Jesús Miguel Quinto Teran
Jimmy Buriticá Londoño
Diego Alejandro Moreno Pedroza
Iván Arcos
Efraín Hernández García
Jeyson David Vargas Crespo
Joel Carrion
Yair Lira
Obed Paz
Aldo Miguel Ortiz Parodi
Obed Paz
Cristobal Nyram
Carlos Perez Verano
Edgar Reyes Salazar
Juan Álvarez
Bryan Imbaquingo
Armando Zuluaga Hurtado
William Camilo Guzmán Espitia
Fabian Flores
Eric López
Anthony Ismael Manotoa Moreno
Gerardo Salvador Jacobo Mejia
Aldo Miguel Ortiz Parodi
Eliezer Hernandez
Kevin Franco
Julia Gabriela Nieva Paredes
Alejandro Osorio Trujillo
Carlos Eduardo Gomez García
Matías Criado
Donny Daniel Vásquez Ramos
Gabriel Monsalve
Juan Felipe Sánchez Arango
Ojalá sigamos teniendo estos apuntes por más tiempo. Gracias majo 😁
Amo tus apuntes! Muchas gracias
La verdad que cada clase mas aprendo mucho mas, realmente se merece llevar el nombre de "Definitivo".
¡Si se aprende muchísimo!
Totalmente!
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 :)
Gracias 💛
Gracias por el aporte!
Recomiendo mucho la página de colors Para jugar con paletas de colores
Muchas gracias!
¡Si! Es muy buena plataforma/ 100%.
Nota:
Adicionalmente var() tambien puede recibir un valor por defecto en caso de no poder encontrar la variable.
var( <custom-property-name> , <declaration-value>? )
Ejemplo:
:root { --base-gray: #273b47 } body { color: var(--base-gray, gray) }
Gracias
Eso está bien útil, especialmente para fuentes
También funcionan las variables al aplicar márgenes:
Funcionan para cualquier valor de CSS
Que chevere, una pregunta fuera del tema, como haces esos pequeños videos demostrativos???
Te agradezco tu ayuda...
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
Exacto. Es bueno el curso, pero no te enseñan todo a profundidad de forma teórica. Lo aprendes con la práctica. Pero que un desarrollador web consulte siempre la documentación como la que acabas de compartir hará la diferencia entre un buen desarrollador y uno que no lo es.
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.
¿Me compartirías el código CSS de ese layout? Por el momento no puedo hacer funcionar bien la distribución con flex, todo se mueve sin sentido.
Hola @ArudoPE Lo lamento, no tengo ese codigo guardado en mi local, lo hicé en CodeSandBox o en CodePen pero ya lo borré hace mucho. Este curso lo hice hace un par de meses.
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.
Te quiero aportar algo y que es, las variables más que reutilizar nos ayudan a almacenar valores, que quizás encontremos un patrón de repetición. Nos ayudan a no repetir muchas veces un valor, para hacerlo a través de un palabra clave. Saludos.
Cuando usan el lorem el comando Alt + z hace un ajuste en la línea, me refiero a que salte de línea
Estaba buscando precisamente éste comentario, GRACIAS!
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
Gracias Bryan buen aporte
Documentación complementaria: https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties
Notas de la clase
Gracias por tu aporte compañero...
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);
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 ✌
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); }
Ademas la psudoclase :root hace referencia al elemento raiz, con la unica diferencia que este tiene una mayor especificad.
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.
Yo pienso lo mismo. ESTOY SUMAMENTE SATISFECHA CON EL CONTENIDO DE ESTE CURSO. Yo era un 0 a la izquierda para CSS, pero con este profe, me siento más segura para usar css
¿Hay algún estándar para nombrar variables en CSS?
Hasta donde se no, simplemente trata que sean específicas y descriptivas, algo que se suele hacer es nombrar la paleta de colores de tu aplicación en plan: primary, secondary, dark, light
También el único como pseudo-estándar que conozco para nombrar las variables es que estas sean lo más descriptivas posible. Por lo general se suele usar, colorPrimary, colorHover, etc...
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/
Esta genial el diseño de tu practica!!! por favor pasame tu cuenta de github!
Diooos que increíble me gusto mucho, gracias <3. Todo esto me servira para mi vida, y sin duda no me arrepiento de invertir en mi futuro con Platzi son lo máximo.
