A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Funciones

20/42
Recursos

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.

Aportes 43

Preguntas 7

Ordenar por:

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

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鈥損rincipal 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%;
	}

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 鈥渃alc鈥.

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 ??