Комментарии 20
Намного лучше относительно прошлой реализации. Жаль нельзя внутри миксины использовать. на реальном проекте была такая задача — на десктопе одни иконки, на мобильном другие. А испльзуются они через миксин.
Но честно говоря я у себя применять такой миксин поостерегся бы — после меня кто-то другой будет поддерживать этот код и столкнется с чем-то неизвестным. Так же я так понял нельзя использовать css свойства, которые записаны через дефис, или это не так?
Но честно говоря я у себя применять такой миксин поостерегся бы — после меня кто-то другой будет поддерживать этот код и столкнется с чем-то неизвестным. Так же я так понял нельзя использовать css свойства, которые записаны через дефис, или это не так?
можно использовать абсолютно любые свойства все те что и в css, даже с использованием переменных. Т.е. можно написать font-weight: (sm: $font-weight-bold). Дефис работает как минус только в случае описания экрана вроде 480-320 (т.е. два числа)… Если написать sm-880, тогда получим строку которая разобьется на два экрана sm и 880px
А почему не поддерживается свойство max-height?
я пока не дошел до этого… нужно подумать как реализовать, чтобы не выбиваться из общего концепта. Надеюсь доработать в будущем
Я немного не правильно написал, чем завел в заблуждение и Вас и себя… max-height — я имел ввиду описание экрана по высоте, а не как свойство. Прошу прощения. В статье отредактировал этот пункт
По поводу миксинов внутри… я честно потратил пару дней на поиски возможности реализовать, но столкнулся с тем что в sass невозможно динамически вызывать миксины. Т.е.
@include $mixin-name()
А чего Bootstrap 4 миксины не использовать бы? Там всё хорошо работает. github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
Спасибо за ссылку, раньше не натыкался на него. Бегло пробежался, и если я правильно понял, bootstrap миксин не избавляет от дублирования свойств, по сути у нас похожи, но все же разные подходы. Но как альтернатива, то конечно…
Про дублирование свойств это просто экономия на спичках. Тот код, который вы показывали в прошлой статье, якобы ваш миксин экономит место, я бы вам посоветовал изучить подход вёрстки mobile first, тогда большинство дублирующего кода просто отпадёт.
У mobile first есть свои плюсы и недостатки, но я макет для мобильных экранов получаю максимум в 20% случаев, а вот десктопные постоянно. Еще часто бывает, что по дизайну необходимо экранов достаточно много. Если 5 экранов, 5 раз дублировать код. всегда проще поменять в одном месте, согласитесь. Так что с «экономия на спичках», не согласен абсолютно. Вы можете со мной соглашаться или нет, дело ваше, но я опробовал вариант из первой статьи на не большом сайте, с большим количеством экранов, и реально править было легко и быстро. Да, код слабо читаемый, но для этого и был написан миксин который представлен в данной статье.
Если я не ошибаюсь, это тот же миксин respond-to.
А мы у себя заюзали миксин к конкретному правилу (кстати можно подправить что бы как у вас передавался масив свойств)
ну собственно gist-link
миксин зовется response-rule
=) критиру и предложения в студию
(по поводу трудности сопровождения думаю что решается прямыми руками и знанием grep-sed-awk)
Ваш миксин, по сути похож на мой первый вариант https://m.habrahabr.ru/post/350466/, только с названиями экранов. Можете почитать отзывы, и сделать выводы
Спасибо прочитал про первый вариант, и теперь понял почему такая реализация!
вы не думали послать к черту названия эканов?
include media(480px)
include media(590px)
include media(850px)
И не нужно голову забивать размерами. Когда у вас при уменьшении экрана все плохо, вы подбираете нужный брейкпоинт и все.
Если думаете, что у вас разрастется зоопарк media, то не нужно делать предварительных выводов, а в случае группировки
www.npmjs.com/package/gulp-group-css-media-queries
В случае типографики www.npmjs.com/package/rfs
include media(480px)
include media(590px)
include media(850px)
И не нужно голову забивать размерами. Когда у вас при уменьшении экрана все плохо, вы подбираете нужный брейкпоинт и все.
Если думаете, что у вас разрастется зоопарк media, то не нужно делать предварительных выводов, а в случае группировки
www.npmjs.com/package/gulp-group-css-media-queries
В случае типографики www.npmjs.com/package/rfs
Привет автору, заморочился ты конешн знатно, но я тут наткнулся на гитхабе на такую штуку, подскажите, объясните, на сколько ваш вариант лучше/хуже чем данный?
Я не знаком с 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). Во всем остальном не увидел разницы.Зарегистрируйтесь на Хабре, чтобы оставить комментарий
SASS: Оптимизируем media screen