Использование Media Queries в Sass 3.2

С выходом Sass 3.2 начал продвигаться в массы путь объектно-ориентированного CSS (OOCSS), принося с собой принцип DRY и программистское мышление. Media queries и OOCSS стали жизненно важны для современной фронтенд разработки.

Давайте посмотрим, что нового

Sass имеет очень полезный функционал, не широко известный content. Можно думать о content, как о yield — позволяет нам определить sass @mixin, который имеет вложенный CSS. Это позволит сэкономить драгоценные часы и уменьшить повторение кода и значительно упростит работу с media queries.

Как это работает

Для начала надо объявить переменные, которые будут определять точки входа для устройств и добавим слой абстракции в наши media queries. Для этого создадим @mixin respond-to:

$small: 320px;
$large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $large) { @content; }
  }
}

.block {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}​

Код лучше читается и мгновенно больше смысла, чем расшифровка, например, media only screen and (max-width: 320px) and (orientation: portrait).
Вся магия заключается в content, который позволяет нам передать в CSS свойства, которые мы хотим применить в соответствии с медийным запросом выше. Мы не можем знать, что в будущем будет требовать дизайн, но через эту абстракцию будет легко обновлять стили, когда эти изменения произойдут.
После компиляции Sass мы получим нужный CSS:

.block {
  float: left;
  width: 250px;
}
@media only screen and (max-width: 320px) {
  .block {
    width: 100%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
  .block {
    width: 125px;
  }
}
@media only screen and (min-width: 1024px) {
  .block {
    float: none;
  }
}​

Если необходимо применять CSS, для чего угодно меньше ipad-lanscape, например, то можно не расписывать вариации respond-to, а сделать новый @mixin, который будет адаптирован под разные устройства:

$ipad-landscape: 980px;

@mixin apply-to($ltgt, $device) {
  $extrema: null;
  @if $ltgt == less-than {
    $extrema: max;
  }    
  @if $ltgt == greater-than {
    $extrema: min        
  } 
  @if $device == $ipad-landscape {
    @media only screen and (#{$extrema}-width: $ipad-landscape) {
      @content;
    }
  }
}
.block {
  @include apply-to(less-than, ipad-landscape) {
    background: black;
  }  
}​

С какими проблемами можно столкнуться

Все это очень прекрасно и позволяет делать интересные интерфейсы, но не будет работать в IE ниже девятой версии. Решение проблемы заключается в генерирование раздельных стилевых файлов:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="css/all-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="css/all.css">
<!--<![endif]-->

В файле для IE объявляются переменные $old-ie: true; и необходимые фиксирование ширины и импортируется основной стилевой файл. В основном стилевом файле переменные IE $old-ie будут принимать значение false по умолчанию. Необходимо будет написать @mixin для IE и расширить функционал apply-to:

@mixin old-ie {
  @if $old-ie {
    @content;
  }
}

@mixin apply-to($ltgt, $device) {
  $extrema: null;
  @if $ltgt == less-than {
    $extrema: max;
  }    
  @if $ltgt == greater-than {
    $extrema: min        
  } 
  @if $fix-mqs-ipad-landscape {
    @content;
  }
  @else {     
    @media screen and (#{$extrema}-width: $device) {
      @content;
    }
  }
}

.block {
    @include apply-to(less-than, $ipad-landscape) {
        float: left;
        width: 70%;
        @include old-ie {
            content: 'Все то, что может понадобиться для IE';
        }
    }
}

Также есть некоторые ограничения на использование @extend внутри media queries… Это означает, что если вы используете @extend в media queries, вы можете только расширить селекторы, которые появляются в том же блоке. Например, такой код работает отлично:

@media only screen and (max-width: 320px) and (orientation: portrait){
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

Такой вариант ошибочен:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media only screen and (max-width: 320px) and (orientation: portrait) {
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

Но мы можем поступить иначе, использовав silent classes, которые не попадают в стили, пока не сделать их @extend.

//silent class
%big {
  width: 20px;
  height: 20px;
}
.block_1 {
  @extend %big;
}
.block_2 {
  @include respond-to('large'){
    @extend %big;
  }
}
.block_3 {
  @include respond-to('large'){
    @extend %big;
  }
}

Получим правильно откомпилированный CSS:

.block_1 {
  height: 20px;
  width: 20px;
}

@media screen and (min-width: 600px) {
  .block_2, .block_3 {
  height: 20px;
  width: 20px;
  }
}

Кроме того, всем бы хотелось, чтобы откомпилированный CSS был меньше и CSS правила отдельного запроса были скомбинированы, например:

.profile-pic {
  @media screen and (max-width: 320px) {
    width: 100px;
    float: none;
  }
}

.biography {
  @media screen and (max-width: 320px) {
    font-size: 15px;
  }
}

Хотелось бы получить:

@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
  .biography {
    font-size: 15px;
  }
}

Вместо этого получаем:

@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}

@media screen and (max-width: 320px) {
  .biography {
    font-size: 15px;
  }
}

Работая с Rails 3.1+ и Sprockets можно использовать джем sprockets-media_query_combiner, чтобы CSS правила были оптимизировано скомбинированы.
Также есть неплохой джем, который можно использовать в проекте responder, для более удобного использования media queries.

Посетители, просматривающие ваш сайт на планшетах или телефоне обязательно поблагодарят вас.