A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Variables

19/42
Recursos

En las variables almacenamos datos que se puede reutilizar en todas nuestras hojas de estilos. As铆 evitamos tener que escribir lo mismo una y otra vez cuando se realiza alg煤n cambio, ya que s贸lo vamos a modificar el valor de la variable y se aplicar谩 a todos los lugares donde sea usada.

Com煤nmente almacenamos en variables las gu铆as de estilo de nuestro sitio, como pueden ser los colores y fuentes.

Aportes 39

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

En tiempos de coronavirus, aprender es lo mejor 馃槂

Las variables a帽adidas en esta clase:

@color-claro: #FFF;
@color-primario: #333;
@color-secundario: #8841da;
@color-variacion: #012179;
@Fuente1: 'Lato', sans-serif;
@Fuente2: 'Oswald', sans-serif;

CSS tambi茅n tiene el uso de variables de forma nativa. y se declaran de la siguiente manera:

:root {
--color-primario: #333333;
--color-claro: #FFFFFF;
--color-secundario: #8841da;
--color-variacion: #012179;
--Fuente1: 'Lato', sans-serif;
--Fuente2: 'Oswald', sans-serif
};```

Y se usan asi: 


```p {
color: var(--colorprimario);
}

Ese momento cuando coloca @color-purpura y quedas qu茅鈥 quieres devolver y corregirlo jaja

profe en la definicion de variables:
"No debemos ponerle el nombre del color a la variable鈥"
profe luego:
"Le ponemos la variable color-purpura al color de h3鈥"
XD

VAYA PODER

Las variables funcionan de forma similar a las constantes en los lenguajes de programaci贸n, permitiendo definir valores que podr谩n ser reutilizados en cualquier parte de la hoja de estilo, inclusive en otras hojas de estilo. Sintaxis:
@variable: valor;

En una experiencia laboral, en el equipo de Front End se discut铆a como nombrar las variables y en especial las de color:
驴Porque darle un nombre a un color que sea m谩s largo de escribir que el mismo c贸digo HEX del color?

  • Es claro que los HEX (en ocaciones no son f谩ciles de memorizar cuando se manejan muchos al momento de maquetar).

  • Darle un nombre al color que fuese f谩cil de recordar, es el objetivo de las variables.

  • Se podr铆a tener la lista de nombres en una esquina del editor para tenerlos a mano.

Estos eran algunos planteamientos sobre la mesa, pero 驴ustedes qu茅 opinan?

Me parece genial poder aprender a interpretar los dise帽os en Zeplin, que justamente en mi trabajo lo estamos usando bastante.

Nota: No me funcionaba el archivo nuevo llamado articulos.less, lo que tuve que hacer fue poner el import de articulos.less por encima del importe de intro.less para que funcionara

antes:

@import "globales.less";
@import "intro.less";
@import "articulos.less";

AHORA COMO FUNCIONA:

@import "globales.less";
@import "articulos.less";
@import "intro.less";

Seg煤n BEM lo correcto es que el selector de clase sea: articulo-principal
Y no as铆 articulo鈥損rincipal. El guion doble 鈥溾撯 indicar铆a que es un modificador, y eso no ocurre.

Variables en Less

CSS nativo ya tiene la funcionalidad de usar variables, pero en Less es mucho mas intuitivo de usar.

Variables en CSS

// Como se declaran
:root{
  --variable_name: value;
  --variable2__name: value;
}

// Como se usan
.p{
  color: var(--variable__name);
}

Variables en Less

// Como se declaran
@variable__name: value;
@variable2__name: value;

// Como se usan
p{
  color: @variable__name;
}

Es s煤per f谩cil usar less. Pero aun as铆 me m谩s gusta usar CSS normalito. A alguien m谩s le sucede eso? 馃槄

Tomen el curso de sistemas de dise帽o para que vean como se definen los colores en un proyecto

Wow que increible lo organizado y modular que puede ayudar el uso de pre-procesadores. Las variables son la salvaci贸n cuando el cliente decide cambiar a ultima hora la fuente o alg煤n color 馃槂 馃槑

Variables


La variables permiten guardar propiedad y reuzarlas. Por ejemplo en le archivo gloabales.less y vemos como se usa

// Asi se crean variables en Less
@color-primario: #333333;
@color-claro: #FFFFFF;
@color-secundario: #8841DA;
@color-variacion : #012179;
@Fuente1:'Lato',sans-serif;
@Fuente2:'Oswald',sans-serif;

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: @Fuente1;
    color: @color-primario;
}

h1,h2,h3 {
    font-family: @Fuente2;
    text-transform: uppercase;
    margin: 0;
}

Las Variables las declaramos con un @

@color-primario: #333333;
@color-claro: #FFFFFF;
@color-secundario: #8841da;
@color-variacion: #012179;
@fuente1: 'Lato', sans-serif;
@fuente2: 'Oswald', sans-serif;```

No me funciona, las variables al estar declaradas en otro archivo me dice que no las reconoce, que est谩n indefinidas.

Genial vamos muy bien.

las variables no se pueden declarar tambien en .css? o solo en .less?

Variables鈥 aun requiero aprender m谩s

Buenas pr谩cticas a la hora usar fuentes y colores:

Un sitio web no tendr谩 mas de 4 colores

No tendr谩 mas de 3 tipografias.

Creaci贸n de variables en Less

Deben ser creadas en en el archivo global para que puedan ser accesibles a muchas plantillas

ejemplos de variables:

@color-primario: #333333;
@color-claro: #fffff;
@color-secundario: #8841da;
@color-variacion: #012179;
@fuente1: 
@fuente2:

驴C贸mo llamarlas?

@fuente2;
@color-claro;

Como usar less desde node!

npm install -g less
> lessc styles.less styles.css

Creo que hubiera estado chido tener acceso al zeplin para tratar de realizar el proyecto por nuestra cuenta 馃槄

Las variables son esas cajitas m谩gicas donde guardamos nuestras herramientas comunes que necesitaremos luego 馃槃. Es una manera de optimizar trabajo. Siempre es bueno tener la informaci贸n de la identidad de la marca en las variables.

Si bien en CSS podemos usar variables, creo que en Less es m谩s r谩pido declararlas y ejecutarlas.

Vamos por buen camino.

Me est谩 gustando鈥

Me encanta

馃槷 que buen uso tienen los preprocesadores

estupendo 馃槃 sigamos

En CSS tambi茅n existen variables y son muy f谩cil de hacer y usar.

  • Se acostumbra escribir as铆:
:root {
--color-primario: #333333;
--color-claro: #FFFFFF;
--color-secundario: #8841da;
--color-variacion: #012179;
--Fuente1: 'Lato', sans-serif;
--Fuente2: 'Oswald', sans-serif
}

Y se utilizan de esta manera:

h3 {
color: var(--color-secundario);
font-family: var(--Fuente1);
}

Excelente clase!

Me gusta! 馃槃 A seguir aprendiendo!

Alguien sabe por me da error al usar una variable con un tama帽o de fuente como variable y al querer utilizarla me da error al compilar?
ej:

@tamao-fuente: 16px;
h1{
font-size: @tama帽o-fuente;
}

siempre ayudan las variables para hacer la vida del programador mas facil, me esta gustando less

En color blanco seria innecesario ya que por defecto tenes un listado de colores por ende solo se escribe white sin necesidad de una variable ya que ahorras c贸digo m谩s que ya tiene su nombre (como si fuera una variable creada pero no) & lo mismo con el negro.

En el caso que sea un color inexistente por default de CSS ahi si seria 煤til.