Bootstrap 4 и Sass

В новом релизе Бутстрапа мое внимание больше всего занимает вот что:

Написан на Sass

Не то чтобы я имел симпатии к Less или Sass, просто почему? Почему в Sass все файлы начинаются с нижнего подчеркивания? Почему они в официальной документации хвастаются, что расширение файла можно не писать (в Less кстати тоже, правда это как-то некрасиво в обоих случаях) при его подключении, но при этом непонятные андерскоры во всех именах? Что я не знаю про этот мир?

Кажется, среди технарей давно сложился стереотип, что Sass это для нормальных ровных ребят, а Less для домохозяек и школьников. Забавно.

Везде rem

Я не сверстал 1000 сайтов, но просто по личным ощущениям я не чувствую, что верстка в rem дает какие-то дополнительные «спецэффекты» (преимущества). Все равно прийдется считать сколько это в пикселях ведь. А фишка с заданием 1 коэффициента для всех размеров экранов и последующим изменением лишь базовой единицы не прокатит тоже. Как хороший дизайнер я знаю, что в зависимости от размера элемента меняются и пропорции (соотношения, коэффициенты) всех величин, которые связаны с этим элементом. Например, если при большом размере шрифта интерлиньяж часто делают побольше, то на мелких кеглях и интерлиньяж делают поменьше, а также всякие отступы (педдинги) для кнопочек.

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

Flexbox

Ура! Теперь можно использовать Flexbox сразу из коробки. И не надо подключать самописный компонент для этого. Хотя, в принципе у меня он уже был написан, поэтому особых проблем не было. 2015 год, можно себе позволить что-то кроме табличек и float: left.

Классы для пэддингов и мерджинов

Появилась целая группа классов, которую можно назвать отдельным компонентом, но ее засунули в utilities. Например:

.m-a { margin:        $spacer !important; }
.m-t { margin-top:    $spacer-y !important; }
.m-r { margin-right:  $spacer-x !important; }
.m-b { margin-bottom: $spacer-y !important; }
.m-l { margin-left:   $spacer-x !important; }
.m-x { margin-right:  $spacer-x !important; margin-left: $spacer-x !important; }
.m-y { margin-top:    $spacer-y !important; margin-bottom: $spacer-y !important; }
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }

Сторонники всяких БЭМ-ов сейчас, наверное, поперхнулись 🙂 Это клево и я тоже думал над формулированием этого компонента в «красивом» виде, но пока не смог (красивые названия классов сложно придумать). Здесь же он как бы теперь есть, но меня смущает, что нельзя для одного блока будет задать разные мерджины в зависимости от размера экрана. Очевидно что для экрана в 2560 пикселей отступ в 200 это нормально, а для телефона — нет. Спасут ли rem? Не думаю.

Ну и не забываем про сборщик проекта на Grunt. Мне кажется, что с каждым новым релизом сборка и Gruntfile.js из Бутстрапа становится все непонятнее и непонятнее. Просто уже до безобразия неприятно там копаться и пытаться врубиться как написать свою собиралку для Less, ой, теперь же Sass.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s