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 
}

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");
}