Срабатывают брекпоинты не по "исторической условности", а при соответствующих разрешениях экрана устройства. И это чертовски удобно!
В статье было указано, что я столкнулась с проектом, написанном на Angular. Поэтому мне нужно было объявить какой-то variables.scss, чтобы от него унаследоваться в компонентах, где мне нужно написать медиазапрос. Как минимум, так человекопонятнее.
В проектах на Angular изначально у Вас не так много возможностей с консолью, чтобы смотреть, где какой модуль схлопывается при каком разрешении и какое правило срабатывает.
Я вообще не понимаю фраз, типа "сверстал, тянешь браузер, о, пора делать модификацию при 740px ширины". Разве, когда Вы верстаете, нет никаких шаблонов для планшетной, мобильной итд версий? Я никогда не верстала "о, а вот тут пора переносить". Только чёткий пиксель пёрфект на всех разрешениях. Никогда не было такого, чтобы в промежуточных каких-то разрешениях вёрстка рушилась настолько, чтобы мне надо было вводить какой-то новый непредусмотренный дизайном брекпоинт и что-то там по нему перестраивать.
"Не очень удобно искать в scss при использовании бэм &_item" — хз, наводите на переменную, нажимаете, например, ctrl (или что у Вас в редакторе используется) и находите абсолютно все упоминания по проекту.
"Я именно отказался от сетки бутстрапа что с ней больше борешься и подстраиваешься" — так я и не использую эту сетку) Пишите любые нужные вам разрешения в мой вариант и всё будет круто)
Я не согласна с "модифицировать надо по нужде, а не по усреднённым значениям размеров экранов". Я привыкла работать "чисто".
надеюсь, мне никогда в жизни не придётся прийти в проект, где был верстальщик, который говорил, что переменные не гибкие :)
иначе это будет бесконечное путешествие по поиску абсолютно рандомных брекпоинтов по всему проекту)
сразу увидеть границу "md" быстрее, чем читать кучу символов больше/меньше/равно, смотреть от какого по какое разрешение будет учитываться правило итд.
вы же, используя, например, bootstrap, не пишите "col-equal-min-xs-max-sm", а просто юзаете "col-sm" или что-то типа того. тут тот же принцип)
в любом случае, вместе они никогда не сработают, что-то да переопределит :))
спасибо за замечание!
действительно, лучше +1px между)
так что надо поменять строку: media only screen and (min-width: getPreviousSize($media)+1) and (max-width: ...
Мне очень сложно понять, о чём Вы пишите.
тут как вам удобнее) мне надо было именно так, как я описала)
надеюсь, мне никогда в жизни не придётся прийти в проект, где был верстальщик, который говорил, что переменные не гибкие :)
иначе это будет бесконечное путешествие по поиску абсолютно рандомных брекпоинтов по всему проекту)
переносить контент иногда приходится так, как дизайнер нарисовал, или клиент сказал)))
и если не видите причины использовать переменные, то чтож
сразу увидеть границу "md" быстрее, чем читать кучу символов больше/меньше/равно, смотреть от какого по какое разрешение будет учитываться правило итд.
вы же, используя, например, bootstrap, не пишите "col-equal-min-xs-max-sm", а просто юзаете "col-sm" или что-то типа того. тут тот же принцип)
мне кажется, что это намного сложночитабельнее, чем "@include media("within", "md") ". но дело ваше :)
ничего не понятно, но очень интересно)
в любом случае, вместе они никогда не сработают, что-то да переопределит :))
спасибо за замечание!
действительно, лучше +1px между)
так что надо поменять строку:
media only screen and (min-width: getPreviousSize($media)+1) and (max-width: ...