Reto

Resumen

Reto: Organiza los z-index de un proyecto por medio de mapas y funciones

Fabricio Micheli

student•

Yo utilicé un map para guardar los índices de los elementos más comunes y usarlo como una tabla para aplicar a diferentes objetos del DOM…

$indices:(
	raiz: 1000,
	carrousel: 1010,
	tooltip: 1020,
	navmenu: 1030,
	modal: 1040
);

@function setIndex($capa){
	@return map-get($indices,$capa);
}

.message{
  z-index:setIndex(modal)
}

La salida en CSS por ejemplo de una clase para mensaje sería esta:

.message {
  z-index: 1040;
}

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Diego Ortiz

student•

Muy buena idea. Se me había muy feo tener que llamar a map-get directamente en el selector. @gollum23 ... ¿Es posible controlar el spam de @Hdas escribiendo "Muchas gracias por tu aporte" en TODOS los vídeos?

Vicente Daniel Zurita Salas

student•

Función con mapa

@function fzi($index){
  $zList:(
  base: 0,
  layer1: 1,
  layer2: 2,
  layer3: 3,
  );
  @return map-get($zList,$index);
};

Ejemplo de uso:

.modal{
  z-index: fzi(layer2);
};

Salida:

.modal {
  z-index: 2;
}

Germán González

student•

Muy buen aporte

Jose L. Figueroa

student•

Súper buena la solución @Vicente Daniel Zurita Salas Muchas grtacias por el aporte!!!

Carlos Roberto Villatoro Barrios

student•

reto cumplido utilizando únicamente mapas.

Jhean Pacheco

student•

Para mi gusto y uso deberían ir así, no suelo usarlos mucho ni tampoco en nivel muy altos:

@function zindex($index) {
  $zx: (
    down2: -2,
    down1: -1,
    base: 0,
    over1: 1,
    over2: 2
  );
  @return map-get($zx, $index)
}

header {
  position: sticky;
  z-index: zindex(over1);
}

Wilson Fabian Pérez Sucuzhañay

student•

No van a subir la solución del reto ya pasaron 4 meses de los comentarios que preguntan esto, solo pro eso pregunto

Ivan Cardozo

student•

La solucion en el siguiente video tiene un bug

Diego Forero

Team Platzi•

Gracias, publicaremos la próxima clase pronto.

Emmanuel López

student•

En alguna parte escuché que es más conveniente dejar los z-index de esta manera, pero podrían ser valores ascendentes cualquiera.

Karina Romero

student•

Aquí la solución que he pensado, saludos.

$layers:( dafult: 0, first: 1, back: 2 );

img { z-index: map-get($layers , first); }

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Gerardo Nava Pereda

student•

Problema:
Hacer Mapa/Lista de los z-index
con function para reutilizarlos

Jhonatan David Ibarra Lavado

student•

J MICHAEL HERNANDEZ GONZALEZ

student•

$z-index: (
  lv1: 0,
  lv2: 2,
  lv3: 3, 
  lv4: 4
)

.card{
  z-index: map-get($z-index, lv3);
}```

David Alejandro Mosquera Moreno

student•

Andrés Campuzano Garzón

student•

¿Como haces para presentar de esa manera el código?

David Alejandro Mosquera Moreno

student•

Con ayuda de esta app

Albert K. Camargo Barreda

student•

$capas:( normal:10, active:20, modal:30 );

z-index: map-get($capas, normal);

Jeremy Palomino

student•

Andrés David Loaiza Zamudio

student•

Buen reto

Cristian Daniel Jesus Rios

student•

Reto:

Camilo Alexander Velandia Velandia

student•

@function zi($index){
  $list:(
    base:0,
    l1:1,
    l2:2,
    l3:3,
  )
};```

Sebastian Marin

student•

super reto

FIDEL ALEMBERT LASCANO VALENCIA

student•

$back:( behind: -99, far-behind: -999, too-far-behind:-999, );

$front:( default: 0, ahead: 99, far-ahead: 999, too-far-ahead:999, );

$zindex: ( back: $back, front: $front );

@function get-z-index($direction, $join){ @return map-get(map-get($zindex, $direction),$join); };

div{ z-index: get-z-index(back,behind); }

Asis Melgarejo Lopez

student•


$zi: (
	L1: 1,
	L2: 5,
	L3: 10,
	important: 1000
);
p {
	font-size: map-get($zi, L1);
}

@function zindex($index) {
  $zx: (
    down2: -2,
    down1: -1,
    base: 0,
    over1: 1,
    over2: 2
  );
  @return map-get($zx, $index)
}

header {
  position: sticky;
  z-index: zindex(over1);
}

Reto

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales