Generated by SassMeister.com.

SassMeister-input.scss

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

//MediaQuery
$breakpoints: (mobile: 767px, tablet: 992px, desktop: 1200px);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " + "Please make sure it is defined in `$breakpoints` map.";
  }
}

.element {
  @include respond-to(mobile) {
    content:"Mobile";
  }
   @include respond-to(tablet) {
    content:"Tablet";
  }
   @include respond-to(desktop) {
    content:"Dekstop";
  }
}

//SassMapSimple
$map01:(
  'Key01' : 'Value01',
  'Key02' : 'Value02',
  'Key03' : 'Value03'
);

.element01{
  content:map-keys($map01); //Print all keys
  content:map-values($map01); //Print all values
  content:map-has-key($map01, 'Key01'); //Print true or false if value
  content:map-get($map01, 'Key01'); //Print Key value use in nested
  content:inspect(map-merge($map01, $map01)); //Print merger all 
  content:inspect(map-remove($map01, 'Key01')); //Print remove the key 
}

//SassMapNested
$map02: (
  'NestKey01' : (
    'Nested01' : 'NestedValue01',
    'Nested02' : 'NestedValue02',
    'Nested03' : 'NestedValue03'
  ),
  'NestKey02' : (
    'Nested01' : 'NestedValue01',
    'Nested02' : 'NestedValue02',
    'Nested03' : 'NestedValue03'
  )
);

.element02{
  content:map-keys($map02); //Print all keys
  content:map-values($map02); //Print all values
  content:map-has-key($map02, 'NestKey01'); //Print true or false if value
  content:map-get($map02, 'NestKey01'); //Print Key value use in nested
}

//SassMap
$map03: (
  'String' : white,
  'Number' : 100,
  'List' : (background .2s, color .3s)
);

.element03{
  color: map-get($map03, 'String'); 
  font-size: map-get($map03, 'Number'); 
  animation: map-get($map03, 'List'); 
}

SassMeister-output.css

@media (min-width: 767px) {
  .element {
    content: "Mobile";
  }
}

@media (min-width: 992px) {
  .element {
    content: "Tablet";
  }
}

@media (min-width: 1200px) {
  .element {
    content: "Dekstop";
  }
}

.element01 {
  content: "Key01", "Key02", "Key03";
  content: "Value01", "Value02", "Value03";
  content: true;
  content: "Value01";
  content: ("Key01": "Value01", "Key02": "Value02", "Key03": "Value03");
  content: ("Key02": "Value02", "Key03": "Value03");
}

.element02 {
  content: "NestKey01", "NestKey02";
  content: ("Nested01": "NestedValue01", "Nested02": "NestedValue02", "Nested03": "NestedValue03"), ("Nested01": "NestedValue01", "Nested02": "NestedValue02", "Nested03": "NestedValue03");
  content: true;
  content: ("Nested01": "NestedValue01", "Nested02": "NestedValue02", "Nested03": "NestedValue03");
}

.element03 {
  color: white;
  font-size: 100;
  animation: background 0.2s, color 0.3s;
}