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

[anttoshka]

Намного лучше относительно прошлой реализации. Жаль нельзя внутри миксины использовать. на реальном проекте была такая задача — на десктопе одни иконки, на мобильном другие. А испльзуются они через миксин.
Но честно говоря я у себя применять такой миксин поостерегся бы — после меня кто-то другой будет поддерживать этот код и столкнется с чем-то неизвестным. Так же я так понял нельзя использовать css свойства, которые записаны через дефис, или это не так?

[HTML-coder]

можно использовать абсолютно любые свойства все те что и в css, даже с использованием переменных. Т.е. можно написать font-weight: (sm: $font-weight-bold). Дефис работает как минус только в случае описания экрана вроде 480-320 (т.е. два числа)… Если написать sm-880, тогда получим строку которая разобьется на два экрана sm и 880px

[anttoshka]

А почему не поддерживается свойство max-height?

[HTML-coder]

я пока не дошел до этого… нужно подумать как реализовать, чтобы не выбиваться из общего концепта. Надеюсь доработать в будущем

[HTML-coder]

Я немного не правильно написал, чем завел в заблуждение и Вас и себя… max-height — я имел ввиду описание экрана по высоте, а не как свойство. Прошу прощения. В статье отредактировал этот пункт

[anttoshka]

Теперь понял =)

[HTML-coder]

По поводу миксинов внутри… я честно потратил пару дней на поиски возможности реализовать, но столкнулся с тем что в sass невозможно динамически вызывать миксины. Т.е.

@include $mixin-name()

— не прокатит ни в каком виде

[Qumbeez]

А чего Bootstrap 4 миксины не использовать бы? Там всё хорошо работает. github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss

[HTML-coder]

Спасибо за ссылку, раньше не натыкался на него. Бегло пробежался, и если я правильно понял, bootstrap миксин не избавляет от дублирования свойств, по сути у нас похожи, но все же разные подходы. Но как альтернатива, то конечно…

[Qumbeez]

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

[HTML-coder]

У mobile first есть свои плюсы и недостатки, но я макет для мобильных экранов получаю максимум в 20% случаев, а вот десктопные постоянно. Еще часто бывает, что по дизайну необходимо экранов достаточно много. Если 5 экранов, 5 раз дублировать код. всегда проще поменять в одном месте, согласитесь. Так что с «экономия на спичках», не согласен абсолютно. Вы можете со мной соглашаться или нет, дело ваше, но я опробовал вариант из первой статьи на не большом сайте, с большим количеством экранов, и реально править было легко и быстро. Да, код слабо читаемый, но для этого и был написан миксин который представлен в данной статье.

[Alexufo]

не избавляет от дублирования свойств

www.npmjs.com/package/gulp-group-css-media-queries?

[anttoshka]

Если я не ошибаюсь, это тот же миксин respond-to.

[HTML-coder]

вот и мне так кажется, но немного расширенный… там есть возможность задавать минимальный и максимальный размер экрана. И кажется еще что-то с вариациями экранов

[AlexBukh]

А мы у себя заюзали миксин к конкретному правилу (кстати можно подправить что бы как у вас передавался масив свойств)
ну собственно gist-link
миксин зовется response-rule
=) критиру и предложения в студию
(по поводу трудности сопровождения думаю что решается прямыми руками и знанием grep-sed-awk)

[HTML-coder]

Ваш миксин, по сути похож на мой первый вариант https://m.habrahabr.ru/post/350466/, только с названиями экранов. Можете почитать отзывы, и сделать выводы

[AlexBukh]

Спасибо прочитал про первый вариант, и теперь понял почему такая реализация!

[Alexufo]

вы не думали послать к черту названия эканов?

include media(480px)
include media(590px)
include media(850px)

И не нужно голову забивать размерами. Когда у вас при уменьшении экрана все плохо, вы подбираете нужный брейкпоинт и все.
Если думаете, что у вас разрастется зоопарк media, то не нужно делать предварительных выводов, а в случае группировки
www.npmjs.com/package/gulp-group-css-media-queries

В случае типографики www.npmjs.com/package/rfs

[CcRaZyY]

Привет автору, заморочился ты конешн знатно, но я тут наткнулся на гитхабе на такую штуку, подскажите, объясните, на сколько ваш вариант лучше/хуже чем данный?

[HTML-coder]

Я не знаком с PostCSS, но похоже что он работает только с CSS. У меня же миксин написан на Scss (Sass) и предназначен для работы в scss файлах. В целом, синтаксис PostCSS конечно выглядит очень не плохо, но смысл похож на тот что и у меня. Миксин занимает немного больше места в файлах. Но у моего миксина есть возможно прописывать диапазоны ширины экранов. Например 480 — 640 будет означать @media screen (min-width: 480px) and (max-width: 640px). А так же в случае необходимости можно указать динамически min или max width например max-480 — выдаст @media screen(max-width: 480px), а min-880 выдаст, соответственно @media screen(min-width: 880px). Во всем остальном не увидел разницы.