Funciones
Clase 20 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Stiven Jiménez
student•
hace 6 años
Andres Evaristo Ruiz Gonzalez
student•
hace 6 años
Alejandro Sebastian Dubon Estrada
student•
hace 6 años
Clase 20 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Stiven Jiménez
Andres Evaristo Ruiz Gonzalez
Alejandro Sebastian Dubon Estrada
Juan Ignacio Recofsky
Juan Castro
Dario Arcos
Maverick Gayoso
Enrique Orozco Gaytán
Wilson Delgado
Addi Alberto Salazar Espinosa
Cristian Daniel Jesus Rios
David Celis Garcia
Federico Ivan Llano
Curious Sloth
Maricruz Pizaña Solano
Mauricio Doncel
Lucas Frezzini
Ariel Ezequiel Biazzo Genua
Cesar Gonzalez Groh
Bryan Eduardo Jami Jami
Xiomara Alejandra Hernández Arzola
Antonio Rafael González Ferrer
Stiven Jiménez
Addi Alberto Salazar Espinosa
Maricruz Pizaña Solano
Rodrigo Reyes
CRISTIAN BARBERO PÉREZ
Kevin Parra Lopez
Néstor Raúl Guzmán Díaz
Raúl Adolfo Sánchez Rodríguez
Jonathan Amaya Mendieta
Eduardo Reyes
Cristian Emanuel Collazo
Daniel Hurtado
Angélica Rocha
Platzi Team
Jair Neri
Maricruz Pizaña Solano
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; } }
Gracias, no se dio cuenta Wilson xD
A mi me funcionó en .intro .intro__titulo
.intro{ width: 1340px; height: 650px; padding: 10px; margin: 0 auto; position: relative; background-color: @color-claro; &__titulo{ font-family: @fuente2; text-transform: uppercase; font-size: 50px; line-height: @fuente-base + 50%; } }
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%?
:thinking: Oye, sí. Buen :eye:. Está muy raro.
Probé y busqué por qué Less hace así las cuentas, pero no encontré nada nadita. :/
Tal vez te funcione usar calc de CSS normal. Aunque el resultado no es exacto, lo redondea a `20px. :sweat_smile:
Hola, de acuerdo a lo que revisé, lo que sucede es que no esta tomando el ''%" sino solamente el numero entero, es como sumarle por ejemplo a los 18px de @fuente-base + 10 da como resultado 28px, si le pones al 10 el "%" toma igual solo 10, SIN el porcentaje. Saludos.
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). :)
Less -- Functions
gracias
Gracias! :D
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%; }
line-height: @fuente-base + 50% /* y me separo mejor el titulo muchas gracias*/
si, esto lo solucuiona, pero no esta funcionando los %, asi que solo lo esta sumando @fuente-base = 18px + 40 = 58px. para que funcione como porcentaje deberia ser @fuente-base + (@fuente-base * 1.4); seria añadir el 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
Muchas gracias.
Disculpen ¿Que es lo que escribo mal en el código? Pues en la línea 30 me acepta las declaraciones con normalidad pero la hacerlo en la regla 54-56 no la identifica ni la declaración 55 ó 56. Pero al llamar la clase sin anidaciones 60-62 funciona correctamente. Gracias
Hola, cómo estas?
Lo que se me ocurre es que la anidación te la este haciendo mal, y sea un problema por tanta anidación & > & > &.
No se me ocurre otra cosa, de hecho cuando lo pruebas en la linea 60-62 si te funciona sin la anidación automática. Quizás es un error del preprocesador.
Lo que podes hacer es ir al CSS final y ver como se esta escribiendo la regla y que error tiene para poder darte una idea de como escribirlo correctamente.
Saludos.
Hola! como estas? espero que tengas un muy lindo domingo. Mira la 60 y 62 te funciona bien, ya que la clase a la que llamas esta separada de todas las anidaciones y/o clases. Con respecto al problema, una situacion muy parecida me sucedio a mi, y lo solucione guardando con (ctrl + s) todos los archivos de less. A veces aunque no aparezca el circulo blanco en visual studio, hay que guardar igual... no se muy bien por que :)
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 )
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.
Me siento bien confundida, no me agarra los cambios que hago en LESS en el HTML, ya revise y tengo bien linkeado el CSS.. ojalá actualicen este curso.. O lo mejoren, se hacen muchos archivos o se sobre escriben, o estoy mensa y no se como lidiar con eso jajaja
Puedes acceder al Discord oficial de Platzi y escoger la escuela de desarrollo web para compartir tus dudas y bugs: https://platzi.com/discord
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/
Muchas gracias! buen dato :D
Gracias por el aporte.
Color fade solo es parte de less?
Creo que sí, en CSS puedes utilizar la notación RGBA, donde los tres primeros valores corresponder a Red, Green y Blue, y el último la opacidad.
Por ejemplo un negro con la mitad de opacidad:
color: rgba(0,0,0, 0.5);
Tengo un pequeño error con el archivo artículos.less No reconoce ninguna de las variables
@import "globales.less"; @import "intros.less"; @import "article.less";
Este es articulos.less
.articulo--principal { max-width: 660px; margin: 0 auto; &__intro { font-size: @fuente-base + 8%; } h2 { margin: 40px 0; font-size: 50px; text-align: center; } h3 { color: @color-secundario; } }
Me da este error
Lo mismo pasa con las variables de los colores
Hola, asegúrate de que el nombre que estas importando en el archivo Platzigames concuerde con el nombre de articulos.less, a mi me pasaba exactamente lo mismo pero mi error era que en el archivo Platzigames se me había olvidado importarlo luego si ya reconocía todas la variables.
Aplicación de ++line-height++ a los textos del proyecto
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
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.
Sucede que en articulos.less haces uso de una variable sin declarar:
h3 { color: @color-secundario; }
Tampoco la importas en articulos.less:
@import "globales.less";
Siempre te dara error. Para que quieres compilar estos archivos?
Solo compilar platzigames.less y los demás archivos solo guardar cambios. El resto es magia de la terminal =)
//platzigames.less @import "globales.less"; @import "intros.less"; @import "articulos.less";
Espero sea de ayuda =)
Pero la fuente base no la aplicamos al body
Interesantes las funciones. :D
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
Gracias :)