В этом посте речь не пойдет о каком-либо старом миксине Sass Media. Нет. Мы рассмотрим миксин точки останова @import (ранее Team Sass). В мае Уго Жираудель написал статью, в которой сравнивал различные способы обработки медиазапросов с помощью Sass . Он упоминает точку останова в конце этой статьи, и сегодня мы подробно рассмотрим управление точками останова с помощью Sass с помощью плагина точки останова.
Зачем использовать плагин?
Если вы похожи на меня, вы, возможно, начали читать эту статью и подумали: «У меня уже есть свой собственный миксин медиа-запросов, зачем использовать этот?» Это точно такой же вопрос, который я бы задал несколько месяцев назад. Я создал свой собственный миксин, который мне действительно удобен, и я не вижу необходимости переключаться. Тем не менее, есть несколько веских причин, чтобы посмотреть и попробовать другой миксин.
Во-первых, у всех нас есть слепые пятна. Хотя я могу быть полностью доволен написанным мною кодом, я могу упустить некоторые отличные способы улучшить его или пропустить ошибку. Загрязнение рук чужим кодом — отличный способ развить свои навыки и улучшить собственный код.
Во-вторых, вполне нормально зависеть от чужого кода. Для программиста «Одинокого рейнджера» бонусных баллов нет. Конечно, вам нужно оценить код и надежность его авторов и сопровождающих, но наличие полезного плагина, поддерживаемого набором квалифицированных добровольцев, является невероятной роскошью.
В-третьих, знание множества инструментов делает разработчика более универсальным. Это особенно верно, если вы находитесь в ситуации, когда вы часто «наследуете» существующий код. В конечном счете, не имеет значения, любите ли вы или ненавидите новый код, который вы пробуете, попытка сделать его более универсальным и уверенным.
Базовая точка останова
Установка точки останова
Точка останова — это расширение Compass, поэтому вам нужно будет запустить Compass, прежде чем вы сможете его использовать. Когда все будет готово, вы можете найти инструкции по установке на веб-сайте Breakpoint.
Установка переменных точек останова
Чтобы начать работу с точкой останова, вам необходимо установить ряд переменных для ваших точек останова. Переменные точки останова могут быть такими же простыми, как измерение ( $bp-large: 1200px ), или сложными, как список значений ( $bp-complex: (min-height 720px) (orientation landscape) (min-resolution: 300dpi); ). Давайте посмотрим на варианты для этих переменных.
Одно измерение
Если все, что вы задали в переменной, является числовым, то по умолчанию для точки останова будет использоваться медиазапрос минимальной ширины.
$bp-one-measurement: 30em; //output @media (min-width: 30em) { ... }
Два измерения
Если ваша переменная включает в себя два измерения, точка останова будет использовать более низкое значение как минимальную ширину и более высокое как максимальную ширину:
$bp-two-measurements: 20em 40em; //output @media (min-width: 20em) and (max-width: 40em) { ... }
Особенность и измерение
Если ваша переменная представляет собой список со строкой и номером, точка останова будет использовать эту строку в качестве имени функции медиазапроса, а номер — в качестве ее значения.
$bp-feature-measurement: max-height 700px; //output @media (max-height: 700px) { ... }
Особенность и ценность
Вероятно, вы можете увидеть, куда мы идем с этим: вы можете поместить любую пару объект-значение медиа-запроса в переменную и передать ее в точку останова:
$bp-feature-value: orientation portrait; //output @media (orientation: portrait) { ... }
Многофункциональные пары
Давай сойдем с ума сейчас. Вы можете собрать столько пар объектов-значений медиа-запросов, сколько захотите, просто заключив каждую пару в скобки.
$bp-multiple-feature-pairs: (min-height 720px) (orientation landscape) (min-resolution: 300dpi); //output @media (min-height: 720px) and (orientation: landscape) and (min-width: min-resolution 300dpi) { ... }
Типы СМИ
Помните типы медиа? Экран, печать, телевидение, проекция и т. Д.? Передайте одну из этих меток в точку останова, и она будет частью вашего вывода:
$bp-include-type: tv 30em; //output @media tv and (min-width: 30em) { ... }
Обработка ошибок
Допустим, вы положили некоторые плохие вещи в переменную для точки останова. Сколько это позволит вам сойти с рук? Точка останова довольно мягкая: чем бы вы ни кормили ее, она возвращается. (GIGO, верно?)
$bp-error: not-a-feature-or-value; //output @media (min-width: not-a-feature) { ... } $bp-error: bogus pair; //output @media (pair: bogus) { ... } $bp-error: (fake list) what; //output @media (list: fake) and (min-width: what) { ... }
Что может вас удивить, так это то, что если вы передадите недопустимые строки в виде пары «свойство-значение», точка останова изменит их порядок. Я ожидал бы $bp-error: bogus pair; производить @media (bogus: pair) { ... } . Это связано с тем, что логика точки останова для обработки двухструнной пары только проверяет, является ли первая строка допустимым именем значения медиазапроса. Если это не так, точка останова предполагает, что это значение, не беспокоится о проверке второй строки и предполагает, что вторая строка является допустимым именем объекта. Хотя @warn было бы неплохо, это, по сути, спорный вопрос, поскольку в любом случае в этом сценарии ничего не действует.
Вызов медиа-запросов
Теперь, когда вы знаете, какое безумие вы можете поместить в переменные медиазапроса для точки останова, давайте посмотрим, как использовать его в своем коде. Конечно, первое, что нужно сделать, это @import библиотеки Breakpoint в ваш Sass. После того как вы сделали это и настроили свои переменные, вы готовы использовать mixin breakpoint() .
body { color: black; @include breakpoint($bp-one-measurement) { color: red; } } //output body { color: black; } @media (min-width: 30em) { body { color: red; } }
Я рекомендую использовать breakpoint() внутри любого селектора, который будет затронут: breakpoint() автоматически создаст этот селектор внутри стандартного синтаксиса CSS @media (){} . На мой взгляд, размещение вариантов медиазапроса в соответствующем селекторе значительно упрощает поддержку Sass.
Однако, если вашему проекту или организации требуются отдельные партиалы медиазапроса, вы все равно можете использовать точку останова: просто вызовите mixin, а затем поместите в него любые селекторы, которые хотите
// _global.scss body { color: black; } // _mq-30em.scss @include breakpoint($bp-one-measurement) { body { color: red; } } //output = exactly the same body { color: black; } @media (min-width: 30em) { body { color: red; } }
Точка останова — Вне Основ
Откат для IE8
Если вы поддерживаете IE8 или более раннюю версию или другие mq-браузеры без использования (без использования JavaScript-заполнения, такого как response.js ), вы можете указать стили для этого «запасного» состояния. (Лично я рад предоставить IE8 более широкую версию одностолбцовых стилей для мобильных устройств, но вам может потребоваться предоставить этим пользователям версию сайта в стиле «полный рабочий стол».) Точка останова позволяет вам делать это с помощью $breakpoint-no-queries Переменные $breakpoint-no-queries и $breakpoint-no-query-fallback .
$breakpoint-no-queries: false; $breakpoint-no-query-fallbacks: true; body { color: black; @include breakpoint(567px, $no-query: '.no-mqs') { color: red; } } //output body { color: black; } @media (min-width: 567px) { body { color: red; } } .no-mqs body { color: red; }
В этом примере мы используем класс тела .no-mqs для нацеливания на браузеры, которые не поддерживают .no-mqs и предоставляют им «большой» вид сайта, не нарушая порядок «сначала по мобильному».
Если вам нужно распечатать эти резервные стили в отдельной таблице стилей, ознакомьтесь с этой частью документации по точкам останова .
Контекст медиа-запроса
Вы когда-нибудь писали миксин, который выводил бы разные стили в зависимости от того, в какой точке останова это было? Если это так, breakpoint-get-context($feature) дает вам вспомогательную функцию для выяснения: breakpoint-get-context($feature) .
body { @include breakpoint($bp-multiple-feature-pairs) { orientation: breakpoint-get-context('orientation'); } } //output @media (min-height: 720px) and (orientation: landscape) and (min-width: min-resolution 300dpi) { body { orientation: landscape; } }
Вывод
Точка останова — это мощный инструмент для управления медиазапросами с помощью Sass. В интересах полного раскрытия, однако, я не часто использую это. Одна из причин: я помещаю свои точки останова в карту Sass (и в основном просто использую запросы минимальной ширины). Однако для более сложных проектов (например, с запросами на печать, ориентацию или разрешение) точка останова охватывает гораздо больше, чем мой простой миксин минимальной ширины, и вы можете узнать больше из вики-репозитория Breakpoint github .
Вы можете поиграть с кодом этих примеров здесь, на SassMeister .