Learning about Maps and Lists

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Z-Index
// =======

$z-index: (
  'bump': 10,
  'canvas': 100,
  'overlay': 200,
  'banner': 300,
  'loader': 900,
  'messages': 1000,
  'sortable': 2000,
);

@function z-index($layer) {
  @if not map-has-key($z-index, $layer) {
    @warn "Whoops, we did not find `#{$layer}` in $z-index map.";
  }

  @return map-get($z-index, $layer);
}

// .overlay {
//   z-index: z-index(sortable);
// }


// $z-index:
//   'bump',
//   'canvas',
//   'overlay',
//   'banner',
//   'loader',
//   'messages' ,
//   'sortable';

// @mixin z-index($layer, $list: $z-index) {
//   @if not index($list, $layer) {
//     @warn "Whoops, we did not find `#{$layer}` in z-index list.";
//   }

//   z-index: index($list, $layer);
// }

// .overlay {
//   @include z-index(sortable);
// }