Медиа запросы в SASS (SASS Media Queries)

Я думаю, не стоит объяснять насколько популярным стал responsive дизайн. В этой статье я приведу коллекцию полезных миксинов (media queries mixins), включающих в себя стили для устройств IOS, таких как IPhone и IPad, для версии SASS 3.2.0+.

Автор данной коллекции

Автором коллекции SASS Media Queries является Rafal Bromirski.

Поддержка браузерами

Паттерны представленные ниже поддерживаются всеми современными браузерами в которых есть поддержка медиа запросов.

Как установить SASS Media Queries

Установить можно вручную с сайта или через терминал:

curl -O https://raw.github.com/paranoida/sass-mediaqueries/master/_media-queries.scss

Внутри вашего SASS/SCSS файла надо прописать:

 @import "media_queries"; // не забудьте добавить правильный путь

Что находится внутри коллекции SASS Media Queries

Requirements:
  Sass 3.2.0+

Version:
  2.1                            // developed on 16/02/2013

Variables:
  $units: 1px;                   // default units for 'screen' mixins - it must include a digit!

Mixins:
  @ min-screen(width)            // shortcut for @media screen and (min-width ...)
  @ max-screen(width)            // shortcut for @media screen and (max-width ...)
  @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...)
  ---
  @ iphone3                      // только iPhone (2, 3G, 3GS) landscape & portrait
  @ iphone3-landscape            // только iPhone (2, 3G, 3GS) только landscape
  @ iphone3-portrait             // только iPhone (2, 3G, 3GS) только portrait
  ---
  @ iphone4                      // только iPhone (4, 4S) landscape & portrait
  @ iphone4-landscape            // только iPhone (4, 4S) только landscape
  @ iphone4-portrait             // только iPhone (4, 4S) только portrait
  ---
  @ iphone5                      // только iPhone (5) landscape & portrait
  @ iphone5-landscape            // только iPhone (5) только landscape
  @ iphone5-portrait             // только iPhone (5) только portrait
  ---
  @ ipad                         // только iPad (1, 2, Mini) landscape & portrait
  @ ipad-landscape               // только iPad (1, 2, Mini) только landscape
  @ ipad-portrait                // только iPad (1, 2, Mini) только portrait
  ---
  @ ipad-retina                  // только iPad (3, 4) landscape & portrait
  @ ipad-retina-landscape        // только iPad (3, 4) только landscape
  @ ipad-retina-portrait         // только iPad (3, 4) только portrait
  ---
  @ retina                       // devices with retina

Как работают SASS медиа запросы?

Сразу стоит отметить, что всякий раз, когда вы видите миксины mixins (min-screen, max-screen, screen) при этом нет необходимости указывать единицы измерения. Однако если вам необходимо указать единицы, выраженные не в пикселях, помните о переопределение в фале SASS/SCSS. Итак, рассмотрим подробнее все доступные варианты @mixin.

min-screen(min-width)

Это сокращённая запись от @media screen and (min-width ... ) { ... }. Великолепно работает в подходе mobile first.

 @include min-screen(320)  { ... }
 @include min-screen(480)  { ... }
 @include min-screen(768)  { ... }
 @include min-screen(1024) { ... }

Такие записи компилируются в:

 @media screen and ( min-width: 320px) )
{
  ...
}
@media screen and ( min-width: 480px )
{
  ...
}
@media screen and ( min-width: 768px )
{
  ...
}
@media screen and ( min-width: 1024px )
{
  ...
}

screen(max-width)

Это сокращённая запись от: media screen and (max-width ... ) { ... }

Такая запись используется, если вы начинаете старт с широких дисплеев и двигаетесь в сторону более узких. При этом стили наследуются от предыдущих условий.

@include max-screen(1024) { ... }
@include max-screen(768)  { ... }
@include max-screen(640)  { ... }

Такие записи компилируются в:

@media screen and ( max-width: 1024px )
{
  ...
}

@media screen and ( max-width: 768px )
{
  ...
}

@media screen and ( max-width: 640px )
{
  ...
}

screen(min-width, max-width)

Здесь вы можете добавить правила в нужном диапазоне разрешений дисплея. Это может стать полезным, если необходимо добавить правила сразу к нескольким группам устройств или одному с особенным разрешением экрана.

@include screen(768, 1280) { ... }
@include screen(320, 640)  { ... }

Такие записи компилируются в:

@media screen and ( min-width: 768px ) and ( max-width: 1280px )
{
  ...
}

@media screen and ( min-width: 320px ) and ( max-width: 640px )
{
  ...
}

SASS медиа запросы для iOS устройств

Вы можете легко управлять стилями для различных IOS устройств:

@include ipad-retina { ... }              // только iPad с дисплеем retina
@include ipad { ... }                     // только iPad с дисплеем retina (1, 2, Mini)

@include iphone5 { ... }                  // только iPhone 5
@include iphone4 { ... }                  // только iPhone 4/4S
@include iphone3 { ... }                  // только iPhone 2/3G/3GS

SASS медиа запросы для ориентаций 'landscape' и 'portrait'

Если надо добавить стили для ориентаций 'landscape' и 'portrait':

@include ipad-retina { ... }              // common part only for iPad (3, 4) - landscape & portrait
@include ipad-retina-landscape { ... }
@include ipad-retina-portrait  { ... }

@include iphone5 { ... }                  // common part only for iPhone 5 - landscape & portrait
@include iphone5-landscape { ... }
@include iphone5-portrait  { ... }

@include iphone4 { ... }                  // common part only for iPhone 4/4S - landscape & portrait
@include iphone4-landscape { ... }
@include iphone4-portrait  { ... }

И еще:

@include ipad-landscape { ... }           // только iPad (1, 2, Mini) - landscape
@include ipad-retina-landscape { ... }    // только iPad (3, 4) - landscape

@include iphone3-landscape { ... }        // только iPhone 2/3G/3GS - landscape
@include iphone4-landscape { ... }        // только iPhone 4/4S - landscape
@include iphone5-landscape { ... }        // только iPhone 5 - landscape

SASS медиа запросы для retina

.example
{
  ...

  @include retina { ... }                  // только для дисплеев retina
}