Funciones

Al momento de usar

  line-height: @fuente-base + 10%;

en body.
Se rompe nuestra sección de intro la solución está en ponerlo en .articulo–principal asi

.articulo--principal{
  max-width: 660px;
  margin: 0 auto;
  line-height: @fuente-base + 10%;
  &__intro{
    font-size: @fuente-base + 8%;
  }

  h2{
    margin: 40px 0 40px 0;
    font-size: 50px;
    text-align: center;
  }
  h3{
    color: @color-secundario;   
  }
}

Me quedó una duda matemática:
Cuando define el line-height en body, al sumar el 10% a los 18px establecidos en la variable, no deberia ser 19,8px? Sino, cuál es la referencia para ese 10%?

Para los que se estén preguntando por qué le da 28px y no 19,8px (18 + 10%), es porque aparentemente no es la forma correcta de sumar el 10% ya que Less lo reconoce como un entero (18 + 10 = 28). Si realmente quieren sumar el 10% deben pultiplicar por 1,1 (18 * 1,1 = 19,8). 😃

En el error del header yo lo solucion yendo a intro.less y agregando line-height: @fuente-base + 40%; a la clase &__titulo

	&__titulo {
		font-family: @Fuente2;
		text-transform: uppercase;
        font-size: 50px;
        line-height: @fuente-base + 40%;
	}

Less – Functions

Realmente si se pueden realizar cálculos con CSS con la función calc https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Aquí les dejo la paguina de less para que miren las funciones
http://lesscss.org/#

y aquí todas las funciones de less
http://lesscss.org/functions/

Realmente no se si le toma en cuenta el %, al final termina sumando. 18px + 10% -> 28px
te da lo mismo si pones % o no.
Dicho sea de paso, yo uso rem, y para tener el mismo resultado debo sumar 1.

La suma que hace usando rem es 1.8rem + 1 -> 2.8rem

No logro entender para que sirve que le pongamos % si alguien me resuelve esta duda le estaría muy agradecido.

Ojo no toma % toma valor absoluto en px
Ejemplo:
@fuente-base = 18px
@fuente-base + 10% (deberia dar unos 20px)
@fuente-base + 10px (esto da 28px )

Tengo un problema o una duda. Tengo los archivos globales.less, articulos.less, intros.less y platzigames.less.
Cuando intento compilar el archivo articulos.less e inttros.less, estos me dan un error de este estilo variable @color-primario is undefined, indicando que globales.less no esta bien linkeado a ellos, y su respectivo .css no cambia.
Pero al compilar platzigames.less si que lee los archivos correctamente porque estan importadas las variables de global.less desde antes .
Algo asi, si yo cambio el fade de 50% a 80% del .intro__autor_titulo en el intros.less queda algo asi:

	.intro__autor-titulo {
 	   	  color: fade(@color-claro, 80%);
    	}

Al compilar intros.less, prepros me tira este error.
variable @color-claro is undefined
y el archivo intros.css no cambia. Pero al guardar platzigames.less si que cambia esa parte de 50% a 80%, eso quiere decir que less lee las cosas en orden de cascada y no como un global.
Y si agrego @import "globales" a intros.less y articulos.less, renderizan las características de globales.less en sus respectivos .css. Pero al ejecutarse platzigames.less, las características de globales.less solo se renderizan una vez donde se hizo la importación original.

Pero la fuente base no la aplicamos al body

Interesantes las funciones. 😄

Genial, si el titulo principal depronto de daña, como me paso, solo se debe quitar la linea de la pagina globales y listo, Gran clase

Nunca esta de más hecharle un ojito a la documentación para aprender que tan lejos podemos llegar Less Documentacion

Creo que LESS es bastante bueno, pero al momento de esta clase no me ha gustado algún preprocesador hasta el momento para usarlo, recuerdo haber usado SASS hace unos años pero tampoco me mato!
Vamos a seguir a ver si termino usando alguno.

Claro que es relevante mencionar que son útiles

Funciones en Less

En este ejercicio se usaron funciones para cambiar color y opacidad, cambiar altura encima del texto y el tamaño de la fuente.

• Cambiar color y opacidad con fade();

Agrega transparencia, recibe un color o una variable de color instanciada previamente, y la opacidad que deseemos.

¿Cómo aplicarlo?

color: fade(@color-claro, 50%)

Cambiando fuentes

Aplicando variables para cambiar altura de texto o line height y cambiar el tamaño de la fuente:

Primero: Declara la variable que almacenará un tamaño de fuente:

@fuente-base: 18px;

Luego sobre esta variable se basa para hacer los cambios mencionados:

Cambio 1: aplicando separación de párrafo o line height.

line-height: @fuente-base + 10%;

Cambio 2: aplicando cambio de fuente sobre variable previa.

font-size: @fuente-base + 8%;

Ventajas: Creas una mini-plantilla para cambiar la fuente que pongas en ese lugar.

**Cuando necesiten generar texto genérico Lorem:
**

lorem7

El número despues de la palabra determinará la cantidad de palabras.

El 10% exactamente de que es? porque a mi en el cálculo me da 28px. Por lo que ese 10% equivale a 10px. Pero no logro ver de dónde saca ese cálculo.

body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    color: #333;
    line-height: 28px;
}

¿Alguien ha conseguido averiguarlo?

En esta clase el profesor dice que en CSS realmente no podemos hacer cálculos matemáticos, pero creo yo que se olvido de “calc”.

La diferencia entre mixins y funciones es que las funciones por general hacen cálculos y regresan un resultado que es usado como valor de alguna propiedad.

Las funciones en Less ya están prediseñadas, aquí encontraran mas cosas de less y funciones de ejemplo

Funciones en LESS

Less ya tiene ciertas funciones por defecto que nos ayudan a hacer ciertas cosas de manera mas limpia. Una de esas cosas es al momento de agregar opacidad, nosotros solo tenemos que agregar el color y la opacidad.
A continuacion vemos que la funcion es fade y el primer parametro es el color (en formato variablo), seguido de la opacidad.

p{
  fade(@color-claro, 0.5)
}

El ejemplo de arriba es algo muy sencillo si sabes como funciona el rgba(), sin embargo, hay otras cosas mas complejas en las cuales las funciones de Less nos ayudan mucho, como degradados, sombreados, animaciones, etc. Puedes checar todas y cada una de las funciones en el siguiente enlace:
https://lesscss.org/functions/#functions-overview

Al principio no me estaba gustando el tema de los preprocesadores pero, creo que va siendo un gusto adquirido. De a poco me va gustando. 😂

LESS permite utilizar funciones matemáticas para realizar cálculos (básicos). Entre ellas destacan: round(), ceil(), floor() y percentage(). Si introducimos un número entre sus paréntesis nos creará un número redondeado, un número redondeado hacia arriba, un número redondeado hacia abajo y un número convertido a porcentaje, respectivamente.

Super

Para que no te afecte el line-height en body, puedes solo poner que se aplique a los p dentro de body, así no afecta a los títulos y todos los párrafos tienen el mismo interlineado.

body {
	margin: 0;
	font-family: @fuente1;
	color: @color-primario;
	p{
		line-height: @fuente-base + 10%;
	}
}```

f

Vamos por más! 😄

Muy prácticas las funciones.

Estoy presentando un problema con prepos y es que las variables del documento articulos.less me dice que la variable es undefined 😦

No entiendo por qué el line-height da 28?

alguien sabe porque cuando escribo una función no me la reconoce?
me dice que no la encuentra y esta todo perfectamente

Todo bien sin problemas en el código

al usar la funcion de line height se rompe el titulo principal

no entiendo algunas cosas.
¿por qué se rompe el código al ponerlo en el body?
¿por qué no hace el calculo correcto del porcentaje? parece que solo sumara el valor ignorando el signo de %
¿por qué dice que en css no se pueden hacer cálculos matemáticos?

Excelente clase, continuemos.

Me costo trabajo para solucionar el problema que se rempe en el titulo principal pero lo logre

Tengo un problema con usar REM en los cálculos. En otros cursos aprendimos que usar REM es lo mejor para la accesibilidad, en html cambiamos el font-size a 62.5%, para que cada REM sean 10px en vita normal. El problema es que pongo uso @fuente-base: 1.8rem, al momento de usar line-height: @fuente-base + 10% este me regresa 11.8rem en el archivo CSS. Entonces para que funciones tuve que cambiar todo a px.

En tiempos de coronavirus, aprender es lo mejor 😃

span {
display:block;
text-transform: uppercase;
font-size: 15px;
line-height: @fuente-base + 0%;
}

No cuadra el porcentaje que menciona al parecer le incrementa en px.

Fade → Opacidad

&__categoria { color: fade(@color-claro, 50%);

Operaciones Matemáticas → Para variar una variable en Porcentaje por ej.

&__intro { font-size: @fuente-base + 8%; }

ERROR DE H1 POR LINE-HEIGHT
Si te pasó que se te desalineo el H1, fue porque reseteaste el line Height del body, y eso incluye también a los h1.

SOLUCIÓN
Resetea solo los párrafos en tu archivo globales.less asi:
(Y quita esa linea de código del selector body)

p {
	line-height: @fuente-base + 10%;
}

OMISIÓN DE CAMBIAR EL LINE HEIGHT AL PRIMER PARRAFO

Solo faltó añadir una linea de código al height line del primer párrafo para que quede acorde a lo que dicta el diseño base:

    &__intro {
        font-size: @fuente-base + 7%;
        line-height: @fuente-base + 14%;
    }```

Hola a todos, me pasa que al modificar intros.less y colocar la propiedad color: fade(@color-claro, 50%) a &__categoria , no me compila bien el archivo intros.css , pero si miro el archivo platzigames.css , si esta bien , no deberia compilar los dos archivos ,
el intros.less y el platzigames.less ??