Reto
Clase 17 de 21 • Curso de Sass 2018
Contenido del curso
Fabricio Micheli
student•
hace 7 años
Harold David Avila Sabogal
student•
hace 7 años
Diego Ortiz
student•
hace 7 años
Clase 17 de 21 • Curso de Sass 2018
Contenido del curso
Fabricio Micheli
Harold David Avila Sabogal
Diego Ortiz
Vicente Daniel Zurita Salas
Germán González
Jose L. Figueroa
Carlos Roberto Villatoro Barrios
Jhean Pacheco
Wilson Fabian Pérez Sucuzhañay
Ivan Cardozo
Diego Forero
Emmanuel López
Karina Romero
Harold David Avila Sabogal
Gerardo Nava Pereda
Jhonatan David Ibarra Lavado
J MICHAEL HERNANDEZ GONZALEZ
David Alejandro Mosquera Moreno
Andrés Campuzano Garzón
David Alejandro Mosquera Moreno
Albert K. Camargo Barreda
Jeremy Palomino
Andrés David Loaiza Zamudio
Cristian Daniel Jesus Rios
Camilo Alexander Velandia Velandia
Sebastian Marin
FIDEL ALEMBERT LASCANO VALENCIA
Asis Melgarejo Lopez
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; }
Muchas gracias por tu aporte
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?
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; }
Muy buen aporte
Súper buena la solución @Vicente Daniel Zurita Salas Muchas grtacias por el aporte!!!
reto cumplido utilizando únicamente mapas.
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); }
No van a subir la solución del reto ya pasaron 4 meses de los comentarios que preguntan esto, solo pro eso pregunto
La solucion en el siguiente video tiene un bug
Gracias, publicaremos la próxima clase pronto.
En alguna parte escuché que es más conveniente dejar los z-index de esta manera, pero podrían ser valores ascendentes cualquiera.
Aquí la solución que he pensado, saludos.
$layers:( dafult: 0, first: 1, back: 2 );
img { z-index: map-get($layers , first); }
Muchas gracias por tu aporte
Problema:
Hacer Mapa/Lista de los z-index
con function para reutilizarlos
:D
$z-index: ( lv1: 0, lv2: 2, lv3: 3, lv4: 4 ) .card{ z-index: map-get($z-index, lv3); }```
¿Como haces para presentar de esa manera el código?
Con ayuda de esta app
$capas:( normal:10, active:20, modal:30 );
z-index: map-get($capas, normal);
Buen reto
Reto:
@function zi($index){ $list:( base:0, l1:1, l2:2, l3:3, ) };```
super reto
$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); }
$zi: ( L1: 1, L2: 5, L3: 10, important: 1000 ); p { font-size: map-get($zi, L1); }