Медиа-запросы Breakpoint в Sass

Reading time ~10 minutes

Прочитал одну статью, посвященную проблеме создания кода в CSS и Sass.

Статья мне чрезвычайно понравилась - можно даже сказать, я был в восхищении о нее и от того, что написал ее автор. В ней вкратце описывались основные “опорные” моменты при написании кода в CSS/Sass. Одним из таких “опорных” моментов упоминались Breakpoint в Sass.

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

Итак, давайте знакомиться с Breakpoint в препроцессоре Sass. Прежде всего, Breakpoint - это расширение (модуль) для хорошо известной и популярной библиотеки-фреймворка Compass. Создан он двумя web-разработчиками Mason Wendell и Sam Richard.

Основная идея и цель создания этого модуля - сократить к одной строке создание медиа-запроса и возможность задавать для медиа-запросов осмысленные имена.

Установка модуля Breakpoint

Первое, что необходимо сделать, это установить в систему сам модуль

1
breakpoint
. Делается это обычной командой Ruby-окружения:

gem install breakpoint

Но тут могут быть несколько подводных камней, с которыми лично мне пришлось столкнуться (не знаю, как уж читателям). Первое - если у вас уже установлены

1
sass
и
1
compass
обычным способом, через команды:

gem install sass
gem install compass

… то велика вероятность, что у вас в системе стоят Sass версии 3.2.18 и Compass версии 0.12.4. Поверить этот факт можно командой в терминале:

gem list

Однако, на момент написания статьи разрабатывается библиотека Compass под версией

1
1.0.0.alpha.19
, которую уже можно использовать несмотря на ее экспериментальный вид. Более того, модуль
1
breakpoint
совместим только с библиотекой Compass этой версии (1.0.0.alpha.19).

Поэтому, при запуске команды:

gem install breakpoint

… будет произведено автоматическое обновление пакетов

1
sass
и
1
compass
до версий Sass 3.3.4 и Compass 1.0.0.alpha.19. После успешной установки модуля
1
breakpoint
можно создать через Compass новый проект, указав при этом, что в проекте требуется поддержка (required) модуля
1
breakpoint
:

compass create newProject -r breakpoint

Заходим в созданную директорию и пробуем запустить Compass на мониторинг изменений во всех файлах проекта. Но не тут то было:

Ошибка при запуске библиотеки Compass - нет модуля wdm

Compass пишет в терминале, что ему не хватает модуля

1
wdm
и не запускается в режим мониторинга. Что такое
1
wdm
, я не знаю (я не Ruby-разработчик), но подозреваю, что это какой-то модуль. И его придется установить.

Для этого необходимо скачать с оф. сайта Ruby пакет разработчика Development Kit (Device). Мною скачивалась версия

1
DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe
. Ее нужно распаковать в любое (постоянное) место - папку, но при этом не туда же, где уже стоит у вас Ruby. Затем в терминале зайти в эту папку и запустить последовательно три команды (не обращая внимание, что они там пишут в ответ):

ruby dk.rb init
ruby dk.rb review
ruby dk.rb install

Установка пакета DevKit

А затем в этом же терминале снова запустить установку загадочного (для меня) модуля

1
wdm
:

gem install wdm

После этого процесс пройдет успешно и Compass, наконец-то, “заткнется” и станет делать то, что от него требуют - мониторинг содержимого папки:

Успешная установка пакета wdm

Теперь открывает уже созданный Compass файл

1
screen.scss
и дописываем в его начало строчку:

@import "breakpoint";

… говоря те самым, что в наш проект необходимо включить модуль

1
breakpoint
. Если проект создавался не с нуля, а уже был готовым, то поддержку Breakpoint в него можно добавить, дописав в конфигурационный файл
1
config.rb
строчку:

require 'breakpoint'

Дальнейшее знакомство с Breakpoint

Можно приступать к дальнейшему знакомству с Breakpoint.

Breakpoint - дословно с английского языка переводится как “опорная точка”. Медиа-запросы фактически и являются такими опорными точками. В правилах CSS мы указываем браузеру - при ширине

1
viewport
равной 480px сделать такой-то элемент таким-то; а при ширине
1
viewport
равной 768px сделать такой элемент другим! То есть, мы через CSS-правила определяем для браузера подобные опорные точки. Модуль Breakpoint позволяет создавать опорные точки в коде SCSS с помощью одной строки - через миксин (mixin)
1
breakpoint
.

Простейший пример применения миксина

1
breakpoint
приведен ниже:

$high-tide: 500px;

.johnny-utah {
  @include breakpoint($high-tide) {
    content: 'Whoa.';
  }
}

То есть, сначала инициализируется переменная

1
$high-tide
со значением 500px. Затем селектору класса
1
.johnny-utah
задается CSS-правило через подключение миксина
1
@include breakpoint
, аргументом которому передается значение переменной
1
$high-tide
. В теле миксина пишется, что нужно сделать браузеру - создать контент
1
Whoa.
(в данном случае).

Результатом генерации в CSS будет следующий код:

@media (min-width: 500px) {
  .johnny-utah {
    content: 'Whoa.';
  }
}

Предельно просто! ОК, немного усложним задачу и продвинемся дальше, чтобы на примере лучше понять, что из себя представляют Breakpoint:

$bkpt-login-small: 370px;
$bkpt-login-medium: 490px;
$bkpt-login-large: 865px;

body{
  background-color: hsl(0,100%,25%);
}

@include breakpoint($bkpt-login-small){
  body{
    background-color: hsl(30,100%,50%);
  }
}

@include breakpoint($bkpt-login-medium){
  body{
    background-color: hsl(60,100%,50%);
  }
}

@include breakpoint($bkpt-login-large){
  body{
    background-color: hsl(120,100%,50%);
  }
}

Здесь мы создали три переменные

1
$bkpt-login-small
,
1
$bkpt-login-medium
,
1
$bkpt-login-large
с помощью которых установили три опорные точки для адаптивного дизайна. А затем в SCSS-правилах через подключение миксина
1
@include breakpoint
для каждой опорной точки задаем правило для элемента
1
body
, последовательно указывая этому миксину переменные в качестве аргументов. Результат работы этого кода приводить не буду - вы можете сами набрать его в редакторе и проверить!

Варианты аргументов миксина Breakpoint

Миксин

1
breakpoint
в качестве аргумента может принимать не только одно значение, как в примере выше.

Два числа в качестве значений

Переменной можно задать два числа в качестве значений:

$ex-presidents: 600px 800px;

В этом случае модуль Breakpoint автоматически распознает и преобразует их в пару значений min-width/max-width:

.nixon {
   @include breakpoint($ex-presidents) {
   content: 'Ex-Presidents';
   }
 }

@media (min-width: 600px) and (max-width: 800px) {
   .nixon {
     content: 'Ex-Presidents';
   }
 }

Имя и значение этого имени

Переменной можно задать имя и значение этого имени:

$surfboard-width: max-width 1000px;

Модуль Breakpoint распознает его следующим образом:

.johnson {
   @include breakpoint($surfboard-width) {
     content: 'Surfboard Width';
   }
 }

 @media (max-width: 1000px) {
   .johnson {
     content: 'Surfboard Width';
   }
 }

Расширенный вариант имени и значения

И можно пойти еще дальше:

$surfboard-height: (min-height 1000px) (orientation portrait);

Breakpoint воспримет это таким образом:

.carter {
   @include breakpoint($surfboard-height) {
     content: 'Surfboard Height, Portrait';
   }
 }

@media (min-height: 1000px) and (orientation: portrait) {
   .carter {
     content: 'Surfboard Height, Portrait';
   }
 }

Настройки модуля Breakpoint

Модуль Breakpoint имеет совсем немного настроек, которые выражаются в четырех переменных, которые можно легко переопределить в рамках разрабатываемого проекта:

  • 1
    
    $breakpoint-default-media
    
    - тип медиа-запроса. По умолчанию его значение равно
    1
    
    all
    
    , то есть медиа-запрос применим ко всем типам устройств: мониторы, телефизоры и так далее.
  • 1
    
    $breakpoint-default-feature
    
    - по умолчанию установлено в значение
    1
    
    min-width
    
    как наиболее часто используемое на практике. То есть, это запрашиваемая характеристика типа устройства.
  • 1
    
    $breakpoint-default-pair
    
    - установлено в значение
    1
    
    min-width/max-width
    
    по умолчанию. То есть, при передаче миксину
    1
    
    breakpoint
    
    пары чисел (к примеру - 400px и 500px) он распознает их как
    1
    
    min-width: 400px
    
    и
    1
    
    max-width: 500px
    
    .
  • 1
    
    $breakpoint-to-ems
    
    - по умолчанию установлено в значение
    1
    
    false
    
    . Если перевести этот параметр в значение
    1
    
    true
    
    , то при передаче миксину
    1
    
    breakpoint
    
    аргументов в любых единицах измерения (
    1
    
    px
    
    ,
    1
    
    pt
    
    ,
    1
    
    %
    
    ) они будут автоматически переконвертированы в
    1
    
    em
    
    ! Круто!

Чтобы не быть голословным, приведу пример настройки последнего параметра -

1
$breakpoint-to-ems
:

Параметр модуля Breakpoints - breakpoint-to-ems

Авторами модуля Breakpoint была сделана еще одна дополнительная “плюшка” - поддержка кроссбраузерности для экранов повышенного разрешения (так называемых Retina-экранов). Чтобы не писать по отдельности медиа-запрос для каждого из движков браузеров:

-webkit-device-pixel-ratio
-moz-device-pixel-ratio
-o-device-pixel-ratio

… можно писать краткий медиа-запрос:

device-pixel-ratio

… который преобразует полученное браузером значение в стандартное разрешение экрана.

Заключение

Перечисленные возможности модуля Breakpoint являются основными, но не единственными. Однако, как мне кажется, этих основных возможностей хватит для 90% случаев на практике. Если же кто желает углубить свои познания в модуле Breakpoint, это легко можно сделать на оф. сайте проекта.

При написании этой статьи активно использовались два бесценных источника (а примеры кода вообще были скопированы оттуда самым наглым образом):

Очень вольный перевод и компиляция этих двух статей была сделана с энтузиазмом и на одном дыхании.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024