Variables

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–principal. 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:

@tamaño-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.