SCSS

by Gopinath Kaliappan

HTML

<div id="banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

<div class="banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

SCSS

@mixin bottom-panel($maxWidth) {
  width: $maxWidth;
}


$breakpoint-lr: 1200px;
$breakpoint-md: 992px;
$breakpoint-sm: 768px;
$breakpoint-xs: 600px;

@mixin largeDevice {
  @media (min-width: #{$breakpoint-lr}) {
    @content;
  }
}

@mixin mediumDevice {
  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lr - 1px}) {
    @content;
  }
}

@mixin smallDevice {
  @media (min-width: #{$breakpoint-sm}) and (max-width: #{$breakpoint-md - 1px}) {
    @content;
  }
}

@mixin extraSmallDevice {
  @media (min-width: #{$breakpoint-xs}) and (max-width: #{$breakpoint-sm - 1px}) {
    @content;
  }
}