Bootstrap Less: работа с препроцессором

Здравствуйте! Данный пост является продолжением статьи «Кастомизация Bootstrap», в которой разбиралось два варианта переопределения дефолтных стилей фреймворка. Сегодня рассмотрим третий вариант кастомизации. Это изменение исходников Bootstrap, также их еще называют препроцессорами. Я решил выделить этот способ в отдельную статью, так как считаю его приоритетным и наиболее удобным для изменения стилей этого замечательного фреймворка.

На сайте бутстрапа в разделе «Customize» можно изменить стили и переопределить переменные как нам нужно, затем скомпилировать новую версию фреймворка и скачать. Все вроде удобно и легко, но если мы что-то забыли, то придется возвращаться и все делать заново.

Переопределение стилей Bootstrap используя less

А если эти действия были проведены пару недель назад?! Велась разработка какого-то сайта с использованием фреймворка и появилась необходимость поменять что-то глобальное, например, нужно изменить брекпоинт сворачивания меню, беда! Ведь мы можем не вспомнить все компоненты, которые изменяли, придется потратить время на написание собственных стилей и «плодить» лишний код CSS.  Вот чтобы не возникало таких неприятных ситуаций и существуют препроцессоры.

Bootstrap предоставляет два варианта исходников: «Less» и «Sass». В рамках данной статьи я буду использовать «Less», если вы не знаете, что это такое, то подробно об этом динамическом языке стилей можно прочитать в википедии.

В разделе «Download» скачиваем архив самого фреймворка и архив с «Less» исходниками. Из архива с исходниками нам нужна только папка «less», копируем ее и помещаем в папку «css» самого фреймворка. Папка с исходниками больше нам не понадобится.

Скачиваем фреймворк и исходники Less

В корневой папке фреймворка создаем файл index.html, в нем подключаем файлы bootstrap.css и bootstrap.js, наполняем его компонентами фреймворка, которые хотите протестировать. О том, как подключать Bootstrap и как с ним работать, я писал в этой статье. Я буду показывать на выше упомянутом меню (Navbar). В общем, после переноса папки «less» и создания файла index.html, должна получиться вот такая структура.

Такая структура должна получиться

И, конечно же, нам понадобится программа для работы с препроцессорами, таких программ очень много, есть как платные, так и бесплатные, как говорится – «Google в помощь». Я использую программу «Koala», эта прога очень проста в использовании, она кроссплатформенная, работает под Windows, Linux и Mac, поддерживает «Less» и «Sass». Скачать ее можно с официального сайта, там все элементарно: переходим на сайт, жмем «Download» и скачиваем установочный файл, запускаем его и устанавливаем.

Запускаем программу, для удобства нужно включить уведомления об окончании компиляции. Кликаем по шестеренке, ставим галочку, как на скриншоте, и жмем «OK».

Включаем уведомления об окончании компиляции

Перетаскиваем папку «less» в окно программы, при первом запуске проги, в правом нижнем углу экрана, могут появляться различные всплывающие окошки разного цвета, пока не обращайте на них внимания. В папке находится много файлов с расширением .less, главным является bootstrap.less, к нему подключаются все остальные файлы, отвечающие за компоненты фреймворка. Если посмотреть на их названия, то сразу становится понятно за какой компонент отвечает конкретный файл.

Изменения вносятся в файлы компонентов, подтягиваются в файл bootstrap.less, а из него компилируются в CSS-файл, проще говоря, перезаписывается CSS-файл с внесенными изменениями. Единственное что осталось, так это указать путь к конечному файлу, то есть к файлу bootstrap.css или bootstrap.min.css, если используете его. Для этого в программе кликаем правой кнопкой мыши по bootstrap.less, жмем на пункт «Настройка пути вывода» и выбираем обычный или сжатый CSS-файл фреймворка.

Указываем путь к конечному файлу CSS

Все, теперь при изменении в любом из «less» файлов компонентов Bottstrap будет автоматически изменен CSS-файл. Для примера я изменю брекпоинт меню, за это отвечает переменная @grid-float-breakpoint, все переменные можно посмотреть в разделе «Customize» на официальном сайте бутстрапа.

Переменная отвечающая за сворачивание меню (Navbar)

Как показано на скриншоте значением переменной @grid-float-breakpoin» является другая переменная @screen-sm-min. Префикс sm указывает на какой ширине экрана должно происходить сворачивание меню. Вот три возможных значения для данной настройки.

  • lg – меню сворачивается на 1199 пикселях.
  • md – меню сворачивается на 991 пикселе.
  • sm – меню сворачивается на 767 пикселях.

Эти значения и значения всех переменных находятся в файле variables.less. Исходя из вышесказанного, нужно просто заменить «@screen-sm-min» на «@screen-md-min» или «@screen-lg-min». Например, мне нужно, чтобы обычное меню показывалось только на больших мониторах, а для всех остальных экранов показывалась его мобильная версия. Для этого открываем файл variables.less в текстовом редакторе, которым пользуетесь (Notepad++, Sublime Text и т.д.), находим с помощью поиска редактора строку с @grid-float-breakpoint. Выглядит она вот так.

@grid-float-breakpoint:     @screen-sm-min;

Изменяем значение на нужное нам, то есть на @screen-lg-min.

@grid-float-breakpoint:     @screen-lg-min;

Сохраняем документ в редакторе и как произойдет компиляция, если мы все правильно настроили в программе «Koala», то в нижнем правом углу появится всплывающее окошко зеленого цвета, а иначе окошко будет красное, это означает, что компиляция не удалась.

Компиляция произведена успешно

Таким образом, вы можете изменять любые переменные или их значения, можно изменять и стили, которые прописаны в других файлах компонентов, но на практике чаще всего изменения вносятся именно в файл с переменными variables.less, а какие-то незначительные правки такие, как размер шрифта того или иного компонента, переопределяются написанием собственных стилей в процессе верстки макета.

Как видите, ничего сложного нет и это действительно очень удобный способ изменения стилей Bootstrap. Надеюсь, статья будет для вас полезна и пригодится на практике, а если остались вопросы, то задавайте в комментариях.

Похожие записи:
Добавлено коментариев - 2
  • Елена 10.03.2017 07:56

    Очень много undefined variables. Не компилится.
    Прога создала свою папку css, не очень понятно, что именно надо использовать в проекте: все перезаписывать или только bootstrap.css?
    А так статья понятная, спасибо.

    Ответить
    • Евгений 10.03.2017 11:39

      Спасибо Вам! Перезаписывать нужно только один файл, либо bootstrap.css, либо bootstrap.min.css, в зависимости от того, какой файл Вами используется. Для этого нужно сделать «Настройку пути вывода» из файла bootstrap.less, указав используемый Вами файл (bootstrap.css или bootstrap.min.css) в программе Koala, как на скриншоте выше в статье.

      Ответить

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности