Mixins para manejo de fuentes responsivas

Clase 39 de 42 • Curso de Preprocesadores CSS

Fadith Enrique Escorcia Mujica

student•

@function calculateRem($size){
	$remSize: $size / 16px;
	@return $remSize * 1rem;
}

@mixin font-size($size) {
	font-size: $size;
	font-size: calculateRem($size);
	line-height: calculateRem($size)*1.5;	
}

Abdiel Ortega

student•

Gracias

Addi Alberto Salazar Espinosa

student•

Gracias! :D

Gonzalo Pimentel

student•

Estoy impresionado con todas las herramientas de los preprocesadores, a mi parecer llevan el CSS a un nivel de lenguaje de programación.

Addi Alberto Salazar Espinosa

student•

Siii Dx

Luis Felipe Medina Rodriguez

student•

pasar de px a rem no seria igual que poner

html{
	font-size: 62.5%;

}

Frank Aveiga Dueñas

student•

Si, da el mismo resultado lo único que con esta forma 12 px no serian 12 rem sino 1.2rem

Luis Felipe Medina Rodriguez

student•

yeah

rodrigo roque

student•

es lo mismo si uso funcion calculateRem que si uso html{ font-size: 62.5%} ?

Camilo Gonzalez

student•

Creo que es mejor de esta forma, lo que dices funciona pero en lo personal me complicó el trabajo a la hora de trabajar con componentes. Tambien he leido que no temrina siendo una buena práctica y acá ademas modificas tambien el line-heiht automaticamente.

Miguel Angel Soler

student•

¿La primera línea donde tenemos la propiedad font-size: $size, no esta de más?

@function calculateRem($size){
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size){
  font-size:calculateRem($size);
  line-height: calculateRem($size)*1.5;
}

Daniel Felipe Merchan Fuquen

student•

Es una manera de tener guardar en una variable el resultado de una operación, en este caso la conversión de pixeles a rem. Es una buena práctica para que el código sea más fácil de leer.

Jorge Cruz Perez

student•

De acuerdo a la opinión de felipe podría ser si te es útil el dato pero aquí muestro los resultados en ambos casos: Con la linea de font-size adicional

Sin ella:

Yo considero que queda a tu criterio, saludos :)

Addi Alberto Salazar Espinosa

student•

Todo fue tan rápido x.x

Fabian Flores

student•

Juan Fernando Lenis

student•

Podemos ahorrarnos el uso de la función calculateRem si seleccionamos nuestro HTML y le damos un font-size: 62.5%; Esto hará que 1rem sea equivalente a 10px. Así sabemos que 0.1rem = 1px.

Camilo Gonzalez

student•

José Fernando Fuentes Roa

student•

Hola a todos, para aquellos que el compilador de Sass les esté generando problemas, esta fue la manera que encontré para calcular los valores del mixin y de la función:

@function calculateRem($size) {
	$remSize: calc($size / 16px);
	@return #{$remSize}rem;
}

@mixin font-size($size) {
	font-size: $size;
	font-size: calculateRem($size);
	line-height: calc(calculateRem($size) * 1.5);
}

Saludos

Jannery Mayra Briceño Franco

student•

¡Gracias por el aporte!

Mauricio Ulises Martinez Velez

student•

38 videos cambiando el rem para que sea responsivo y me vienen a mostrar esta posibilidad en el 39. Creo que deberían hacer esa aclaración al principio.

Rocio Salgado

student•

No es más facil poner en un selector asi: html{ font-size: 62.5%; } y asi usar 1rem como 10px? Es lo mismo?

Oriol Fernando Palacios Durand

student•

No, el mixin y la función también generan un line-height de acuerdo al tamaño de la fuente además de hacer el tamaño en rem

Eliezer Hernandez

student•

Donde encuentra el profesor los aportes de la comunidad de SASS?

Angel leon

student•

El mixin

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
  line-height: calculateRem($size) * 1.5;
}

Andrés David Loaiza Zamudio

student•

Que buena data

Efraín Hernández García

student•

Muy interesante para el uso de fuentes responsive, que pueden ser un dolor de cabeza

Cristian Córdova

student•

Esta clase y la anterior de CSS Grid System. Me han hecho explotar tanto la cabeza como la primera vez que vi en acción CSS Grid. Espectacular...

Daniel Eduardo Sanchez Yañez

student•

Hay una linea que considero que esta demas font-size: $size.

@mixin font-size($size) { font-size: $size; <----------------------------(Esta) font-size: calculateRem($size); line-height: calculateRem($size)*1.5; }

Me gustaria saber si estoy en lo correcto o si la establecen para algo que me estoy perdiendo :)

Carlos Eduardo Gomez García

teacher•

Hmm, en teoría tienes razón, ya que abajo la estás sobreescribiendo, ¿probaste a borrarla para ver si algo se rompe? 🤔

Daniel Eduardo Sanchez Yañez

student•

En un comentario que hicieron en el curso publicaron 2 fotos mostrando que se rompe si la quitas. Y en realidad no pasa nada solo sobreescribe el font-size viejo. Supongo que queda a criterio si dejarla o no, para efectos del codigo no rompe nada en realidad. Me queda de tarea averiguar que es mejor practica. Gracias!

Karen Gómez

student•

Pregunto, en zeplin el archivo con el que se puede trabajar puede ser un .jpg del diseño (obviamente exportado de Ps, Ai o Xd)?

Victor Juan Morales Romo

student•

si puedes exportar los de PhotoShop si puedes exportarlo a Zepelin ya que los productos adobe y la zeplin si lo permite y es hasta facil

aqui una muestra de la comunidad de Zepelin espero que explores algunos otros post que te sirvan.

nomas esta en ingles https://support.zeplin.io/en/articles/1067453-exporting-designs-from-photoshop

Jennifer Andrea Largo Castro

student•

Hola a todos tengo una pregunta! Estos Mixins para el manejo de fuentes responsivas las puedo usar en SASS y tambien en Stylus?. o como seria la implementación de las media queries con stylus. Gracias,

CARLOS FARFAN

student•

Tengo una duda: Cree la funciony el mixin tal como se muestra en el curso:

@function get-opacity($color, $amount) {
  @return rgba($color, $amount);
}

@each $header, $size in (h1: 30px, h2: 25px, h3: 20px) {
  #{$header} {
		font-size: $size;
		@include titulos($Fuente2);
		margin: 0;
  }
}

pero al aplicarlo sale un error dice lo siguiente: 1.125px*rem isn't a valid CSS value.

quien me puede ayudar?

Victor Juan Morales Romo

student•

eso que estas mostrando es de opacidad y el tamaño de encabezados en loop (repeticiones).

->ese error es de esta funcion y del mixin la escribe todo otra vez como te muestro aqui abajito en _globales.scss. espero darme a enterder.

@function calculateRem($size){ $remSize: $size / 16px; @return $remSize * 1rem; }

@mixin font-size($size) { font-size: $size; font-size: calculateRem($size); line-height: calculateRem($size) * 1.5; }

// Funciones @function get-opacity($color, $amount) { @return rgba($color, $amount); }

@each $header, $size in (h1: 30px, h2: 25px, h3: 20px) { #{$header} { font-size: $size; @include titulos($Fuente2); margin: 0; } }

Jorge Cruz Perez

student•

Ok, pero se escribió otra función, la de fuentes, y aquí muestra el de get.opacity, me imagino es un typo lo que hace que te salga ese error pero no podemos ver tu código. Espero al momento ya lo hayas solucionado, saludos :)