Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/* Generating a Map  */
$map: (
    key: value,
    nextkey: nextvalue
);

/*  How to get a Value */
.element:before {
    content: map-get($map, key);
}

/*  How to check if a key is Available */
$map: (
    key: value,
    nextkey: nextvalue
);
 
.element {
  @if map-has-key($map, key) {
    content: 'M has this key.';
  } @else {
    content: ' has not this key.';
  }
}

/* How to merge maps Together */
$colors: (
  light: #ccc,
  dark: #000
);

$brand-colors: (
  main: red,
  alternative: blue
);

// Merge maps
$merged: map-merge($colors, $brand-colors);
 
.element {
  content: map-get($merged, dark);
}

/* Real-world Use Cases */
/* -How to Loop Through a Map and Generate Classes */

$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

/* Multiple Values for Added Awesomeness */
$buttons: (
  error: (#d82d2d, #666),
  success: (#52bf4a, #fff),
  warning: (#c23435, #fff)
);

.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
   
  @each $name, $colors in $buttons {
    $bgcolor: nth($colors, 1);
    $fontcolor: nth($colors, 2);
     
    &--#{$name} {
      background-color: $bgcolor;
      color: $fontcolor;
    }  
  }
  
}

/* Handling Layers (z-index) */

$layer: (
  offcanvas: 1,
  lightbox: 500,
  dropdown: 10,
  tooltip: 15
);

@function layer($name) {
  @if map-has-key($layer, $name) {
    @return map-get($layer, $name);  
  }
   
  @warn "The key #{$name} is not in the map ’$layer’";
  @return null;
};
 
.m-lightbox {
  z-index: layer(lightbox);
}

/* Using Base Styles for Fonts  in a Project */
$font: (
  color: #666,
  family: (Arial, Helvetica),
  size: 16px,
  line-height: 1.4
);

body {
  color: map-get($font, color);
  font-family: map-get($font, family);
  font-size: map-get($font, size);
  line-height: map-get($font, line-height);
}

/*Breakpoints */
$breakpoints: (
    small: 320px,
    medium: 600px,
    large: 768px
);

// Respond-To Mixin
@mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
        $value: map-get($breakpoints, $breakpoint);
         
        @media screen and (min-width: $value) {
            @content;
        }
    }
     
    @warn "Unknown `#{$breakpoint}` in $breakpoints";
}

// Sass
.m-tabs {
    background-color: #f2f2f2;
     
    @include respond-to(medium) {
        background-color: #666;
    }
}

/* Advanced Usage for Colors */
$colorscheme: (
  gray: (
    base: #ccc,
    light: #f2f2f2,
    dark: #666
  ),
  brown: (
    base: #ab906b,
    light: #ecdac3,
    dark: #5e421c
  )
);

@function setcolor($scheme, $tone: base) {
    @return map-get(map-get($colorscheme, $scheme), $tone);
}

.element {
  color: setcolor(brown);
}
.element--light {
  color: setcolor(brown, light);
}
 
 

SassMeister-output.css

/* Generating a Map  */
/*  How to get a Value */
.element:before {
  content: value;
}

/*  How to check if a key is Available */
.element {
  content: 'M has this key.';
}

/* How to merge maps Together */
.element {
  content: #000;
}

/* Real-world Use Cases */
/* -How to Loop Through a Map and Generate Classes */
.icon--checkmark {
  content: a;
}

.icon--plus {
  content: b;
}

.icon--minus {
  content: c;
}

/* Multiple Values for Added Awesomeness */
.m-button {
  display: inline-block;
  padding: .5em;
  background: #ccc;
  color: #666;
}

.m-button--error {
  background-color: #d82d2d;
  color: #666;
}

.m-button--success {
  background-color: #52bf4a;
  color: #fff;
}

.m-button--warning {
  background-color: #c23435;
  color: #fff;
}

/* Handling Layers (z-index) */
.m-lightbox {
  z-index: 500;
}

/* Using Base Styles for Fonts  in a Project */
body {
  color: #666;
  font-family: Arial, Helvetica;
  font-size: 16px;
  line-height: 1.4;
}

/*Breakpoints */
.m-tabs {
  background-color: #f2f2f2;
}

@media screen and (min-width: 600px) {
  .m-tabs {
    background-color: #666;
  }
}

/* Advanced Usage for Colors */
.element {
  color: #ab906b;
}

.element--light {
  color: #ecdac3;
}