Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Mixins para manejo de fuentes responsivas

39/42
Recursos

Aportes 26

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

@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;	
}

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

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

¿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;
}

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.

Todo fue tan rápido x.x

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

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.

Que buena data

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

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…

Siento que todo esto ayuda mas cuando no estas acostumbrado a trabajar con buenas practicas desde el inicio.

Una pequeña duda, la function en este caso se uso automaticamente?, o esta conectada con el mixin font.-size y donde pongas el import font-size es donde la function tendra utilidad?

estupendo ese mixin 😄

impresionado por este mixin

Genial, realmente genial

Me he quedado asombrado con todas las osas que se pueden hacer con mixins, functions, css grid y todo metido en un solo proyecto. Me doy cuenta que soy un novato

Excelente aporte!!

En el archivo _globales.scss

@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;
}```

existe una pagina donde estén todos estos mixin?

Buen dato, mixin guardado para futuros proyectos.

j

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;
}

excelente, ahora si fue muy evidente la utilidad de los mixin