Применять адаптивный дизайн в современных сайтах необходимо. С переходом на препроцессор sass верстка осуществляется быстрее плюс нагляднее становится применение media queries для создание адаптивной верстки.

Для решения задачи будем использовать мощный инструмент миксинов. Создаем файл media.sass, который содержит следующий миксин:

=respond-to($media)
  @if $media == big-tablet
    @media only screen and (max-width: 1400px)
      @content

  @if $media == tablet
    @media only screen and (max-width: 1024px)
      @content

  @if $media == small-tablet
    @media only screen and (max-width: 800px)
      @content

  @if $media == mobile
    @media only screen and (max-width: 639px)
      @content

И дальше начинаем применять его в проекте. Например, будем менять цвет шапки.

.main-header
  background: blue
  padding: 24px
  color: #fff

  +respond-to(big-tablet)
    background: green

  +respond-to(tablet)
    background: red

  +respond-to(small-tablet)
    background: pink
    color: #000

  +respond-to(mobile)
    background: yellow

Теперь шапка начнет менять цвет на разных устройствах или при изменении ширины браузера. Обратите внимание на respond-to(small-tablet) в этой конструкции устанавливается белый цвет для текста, который будет применен и для mobile. От большего к меньшему.

Как это все выглядит можно посмотреть на примере. Для корректной работы не забудьте добавить в head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">