Не работают медиа запросы sass

SASS: Оптимизируем media screen

Примерно месяц назад я написал статью, в которой выдвинул идею об оптимизации @media screen . Идея заключается в том, чтобы иметь возможность писать значения для всех экранов в одну строку. Более подробно можете почитать по ссылке. Большинство комментариев — это критика относительно реализации, к сожалению идей никто не подкинул. Но если посмотреть с другой стороны, из каждой критики можно вытащить идею, поэтому опираясь на мнение читателей, я поставил себе цель написать миксин, который:

• легко читается (максимально повторяющий синтаксис sass/scss/css);
• легко поддерживать (чтобы через год ты понимал, что там написано);
• гибкий (поддержка максимального количества описаний @media );

Давайте посмотрим, что у меня вышло (репозиторий Github)!

Синтаксис

Миксин media поддерживает два параметра $properties и $orientation.
$properties — массив css правил.
$orientation — ориентация экрана (необязательный).

$properties

Давайте разберем код подробней…

Параметр $properties является массивом, поэтому все свойства берутся в ().

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

Здесь мы описываем высоту для экранов с максимальной шириной lg, md и sm (задаются разработчиком, об этом позже).

Так же обратите внимание на код ниже:

В данном примере присутствует экран all, я думаю вы догадались, что это все экраны. Есть принципиальная разница между all и обычным правилом, как width: 100%. Но об этом так же немного позже.

Здесь я постарался максимально гибко соединить диапазоны экранов между min-width и max-width . Т.е. код, представленный выше скомпилирует минимальную ширину sm (640) — максимальную ширину md (768), и для экранов в этом диапазоне задаст белый цвет текста, или серый для md (768) — lg (1024).

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

Первый экран max-width: 880px. По умолчанию ширина проставляется именно максимальная (так же легко поменять). Для этого экрана получим font-size: 12px;
Второй экран min-480 указывает на то, что будем отталкиваться от минимальной ширины экрана 480px (приставка min-), и в итоге получим font-size: 18px для всех экранов шире 480px.

480-md — создаст кастомный минимальный размер 480px и максимальный md (768). Т.е. это вариант диапазона экранов, как в предыдущем примере, только с произвольным значением.

Обратите внимание, что если написать 480-768 мы получим экран -288px, т.е. знак «-» отработает как минус. Поэтому такой пример стоит взять в кавычки «480-768», если конечно вы намерено не писали операцию с «-» (кстати +, *, / так же будет работать).

print — является неизменным параметром и предназначен для печати:

Надеюсь на данном этапе все понятно… Если нет, с радостью разъясню в комментариях.

Давайте перейдем к параметру $orientation

Тут все намного проще. Есть два варианта ориентации экрана landscape и portrait. Собственно, в случае необходимости, вторым параметром прописываем именно эти значения.

В итоге мы получим:

На этом примере можно четко увидеть разницу между all и стандартным правилом. В случае width: 100% правило при любых обстоятельствах подпадает под все экраны. В случае all — все экраны с ориентацией portrait/landscape.

Настройки

Две стандартные переменные, которые нужно отредактировать — это $breakpoints и $media-direction. Вот как они выглядят по умолчанию:

Т.е. для того чтобы создать себе нужное количество экранов с нужными названиями, размерами и первоначальным направлением (min/max) необходимо создать новые переменные в удобном для вас месте:

Этого достаточно чтобы начать работу.

Как еще можно использовать данный миксин?

Если параметр $properties поместить в переменную, тогда можно получить отличную функцию. Например:

Получаем своего рода extend класс. Согласитесь, это может быть очень удобно.

Подведем итоги

Плюсы

Минусы

Вывод

Думаю, цель достигнута. Миксин получился достаточно удобным и лаконичным.

Если вы со мной не согласны, пишите комментарии. В любом случае с удовольствием выслушаю ваш совет по улучшению данного миксина, или попробую извлечь что-то полезное из вашей критики.

P.S. Скачать миксин вы можете в репозитории Github по ссылке. _mixin.scss — тот файл, который вам нужен. Так же файл package.json содержит в себе плагины для Gulp, которые было бы неплохо подключить:

• gulp-autoprefixer добавит префиксы браузеров, там где это необходимо;
• gulp-group-css-media-queries отлично группирует @media screen ;
• gulp-minify-css оптимизирует css, можно сказать, что данный плагин необходим.

Уверен, что для webpack или для любого другого сборщика, вы без труда найдете аналоги.

Источник

media queries не работают #25

Comments

hex0gen commented Jul 30, 2017 •

Православненько правлю _media.sass, но результат компиляции в main.min.css огорчает. Не появляются там эти конструкции. Идут друг за другом без размещения в блоках @media просто в слошную в том же порядке что и в sass файле. В чем может быть причина?

P.S. Спасибо за хороший стартовый шаблон

The text was updated successfully, but these errors were encountered:

hex0gen commented Jul 31, 2017

Чтож похоже мне нужно было прежде разобраться с синтаксисом SASS. Еще раз спасибо за билд

kirillz commented May 28, 2018 •

И все таки не работают, код в _media.sass обрабатывается но не реагирует на смену разрешений. Подскажите что может быть не так? Уже голову сломал, новый проект optimized_html скачивал, менял браузеры. Результат тот же.

Все стало красным но не реагирует на смену разрешений в devtools. Помогите.
Проект готов а заадаптивить не могу

skorolevskiy commented May 28, 2018 •

@kirillz Так ты не правильно написал. Нужно сделать на один уровень выше

kirillz commented May 28, 2018 •

Ой спасибо тебе Добрый человек! Все заработало. Ура!

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

не работают медиа запросы в sass верстая по бэм

столкнулся с такой проблемой верстая макет по БЭМ и делая медиазапросы в sass файлах:

@media (max-width: 1200px)

и код не работает в панели разработчика как зачеркнутый

@media (max-width: 1200px)

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

и это не единожды вот еще примеры:

@media (max-width: 1200px)

@media (max-width: 768px)

@media (max-width: 768px)

кто может подсказать в чем причина и проблема? сам я начинающий заманался не могу найти ответ

1 ответ 1

Дело все из-за приоритетности. Поменяйте местами код или дайте больше вес селектору.

Подробнее:
Каждый селектор имеет свою массу. Самая большая масса происходить от id, маленькая от названия тега. Есть масса одинаковая, выбирается тот, какой находится в файле ниже.
Чтобы увеличить массу, достаточно указать больше информации (родителя, второй класс(если имеется) ило название тега.

Например:
.cards можно заменить на: div.cards или же .cards[class]

Немного информации:
1. Не важно сколько классов будет, вы не сможете переопределить селектор содержащий id, без использования !important или прописав в атрибут style .
2. Прописывать в !important и style только в случае, если никак иначе нельзя сделать.

Источник

Медиазапросы в SCSS — ещё один удобный способ использования @media screen

Недавно столкнулась с проблемой медиазапросов в проекте, собранном на Angular. Уже не помню, какие именно ограничения заставили меня написать миксин для упрощения своей работы, но поделиться результатом и получить фидбек очень хочется. Встречала много других подобных примеров, но для работы мне понятнее и удобнее использовать именно этот.

В общем, для удобства составила себе такие требования:

1. Размеры экранов должны быть вынесены отдельно, чтобы можно было глобально в одном месте поменять поведение (например, вместо «320px» передавать просто «xs»).
2. Данный миксин с медиазапросами может быть не только в одну сторону (например, не всегда только max-width).
3. Миксин может использоваться и отдельно, переопределяя описанные классы внутри, или описываться в теле родителя, переопределяя его свойства.

Итак, определим любые нужные нам разрешения. Например:

Для начала, напишем миксин, который бы принимал нужный префикс диапазона и разрешение, под которое мы ограничиваемся:

Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).

Пример использования, включая в другой миксин:

С этого простого примера мы получим миксин, меняющий ширину блока на разрешении

Источник

Использование 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник