Bootstrap 4 - Переопределить точки останова - Конвертировать в em - PullRequest
Новая
       36

Bootstrap 4 - Переопределить точки останова - Конвертировать в em

0 голосов
/ 17 октября 2018

Я пытаюсь переопределить стандартные точки останова Bootstrap 4 (v4.1.3) и преобразовать их в ems.

. Я начал с переопределения переменной $grid-breakpoints следующим: 

$grid-breakpoints: (
    xs: 0,
    sm: 36.000em,
    md: 48.000em,
    lg: 62.000em,
    xl: 75.000em
);

Однако, когда я пытаюсь скомпилировать, я получаю следующую ошибку: 

Message:
    assets/sass/vendor/bootstrap/mixins/_breakpoints.scss
Error: Incompatible units: 'px' and 'em'.
        on line 42 of assets/sass/0.vendor/bootstrap/mixins/_breakpoints.scss
>>   @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

Кажется, есть проблема с одним из их миксинов, использующих px в своих вычислениях.

Есть идеи, как мне это исправить?

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Чтобы переопределить медиазапросы Bootstrap, у вас не будет выбора, кроме как редактировать исходные файлы Bootstrap.Вам нужно будет преобразовать все значения, найденные в файле _breakpoints.scss mixins, в ems.

Однако, будьте осторожны и делайте это только в том случае, если у вас есть время для тщательного тестирования - здесь есть некоторый нюанс:вы обнаружите, читаете ли вы эти темы, которые обсуждались, когда Bootstrap 4 находился в разработке:

Здесь в основном говорят, что они будут придерживаться px из-за той же самой проблемы, которая была у меня - она ​​ломается при компиляции.Итак, в то время, это было сочтено переломным изменением для Bootstrap V4 и было бы что-то, что следует учитывать для V5:

https://github.com/twbs/bootstrap/pull/27190

Вот длинное обсуждение, которое говорит о плюсах иМинусы использования em единиц в медиа-запросах. Здесь я хочу предостеречь вас , чтобы в первую очередь подумать, есть ли у вас время для тестирования всех сценариев - потому что если вы измените свои медиазапросы на em, то вам также необходимо рассмотреть возможность изменения контейнера max-widthsи, я бы предположил, ряд других значений, которые используют px - смешивание ваших значений не является хорошей идеей и может вызвать непредвиденные головные боли в долгосрочной перспективе.

https://github.com/twbs/bootstrap/pull/17403

Если вы похожи на меня и используете Bootstrap, потому что

  1. тщательно протестирован
  2. позволяет создавать веб-сайты в короткие сроки и с низким бюджетом

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

0 голосов
/ 17 октября 2018

Ошибка говорит вам, что именно не так.Строка 42 из _breakpoints.scss:

@ return if ($ next, точка останова-min ($ next, $ точка останова) - .02px, ноль);

Если вы хотите использовать em, убедитесь, что вы заменили все экземпляры px.

...