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-breakpoint» является другая переменная «@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

  1. Елена

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

    1. Евгений

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

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