Bootstrap считается самым популярным CSS-фреймворком на сегодняшний день. Можно сказать, он задает дизайнерский тренд. В состав его стилевых правил входит сброс стилей, сетка и модули. Все это содержится в одном файле, сборку которого можно загрузить с официального сайта. Большинство разработчиков так и делают, после чего стили Bootstrap перекрывают своими.
Исходники поставляются в файлах с расширением .scss. Чтобы из них получились знакомые вам файлы .css, их нужно прогнать через компилятор SASS. Вот и все.
Перейдите на официальный сайт https://getbootstrap.com и на странице загрузок найдите раздел с пометкой Source files. Скачайте архив к себе на диск. При помощи архиватора распакуйте его в любой каталог. Перейдите в него, скопируйте каталог scss со всем содержимым в корневую директорию вашего проекта. Из всего распакованного архива нам нужен только каталог scss, так что все остальное можете смело удалить.
Внутри scss находятся все исходники Bootstrap, и из них мы будем компилировать наши стили. Обратите внимание, почти все файлы имеют в начале своего имени нижнее подчеркивание, за исключением нескольких. Файлы без этого префикса являются сборочными, их можно компилировать как есть. В них указаны пути непосредственно к исходникам. Например, если указать компилятору файл bootstrap-grid.scss, то он соберет только сетку Bootstrap. А вот файл bootstrap.scss содержит пути для полной сборки. С него мы и начнем. Давайте вначале скачаем компилятор.
Вариантов здесь несколько, но мы пойдем самым простым и быстрым путем. Перейдите на сайт https://sass-lang.com/install и найдите раздел Install Anywhere. Здесь вы увидите ссылку на GitHub. Перейдите по ней. На момент написания этой статьи актуальная версия компилятора была 1.35.1, поэтому ссылка выглядела так: https://github.com/sass/dart-sass/releases/tag/1.35.1. На странице скачивания выберите релиз для своей операционной системы. Чаще всего это dart-sass-1.35.1-windows-x64.zip.
Теперь распакуйте полученный архив, например, в папку D:\Sass. Путь к вашему компилятору должен выглядеть примерно так: D:\Sass\dart-sass\sass. Попробуйте ввести этот путь в своем терминале (cmd). Если все сделали правильно, компилятор должен распечатать информацию о себе (команды, параметры и пр.). Углубляться в его возможности мы не будем, рассмотрим только базовое поведение. В самом начале он говорит, что для сборки используется следующий синтаксис:
sass <input.scss>:<output.css>
Если ваша папка с исходниками расположена, например, в D:\Projects\First\scss, команда для сборки будет такая:
D:\Sass\dart-sass\sass D:\Projects\First\scss\bootstrap.scss:D:\Projects\First\scss\bootstrap.css
Здесь вы указываете компилятору файл для сборки, а после двоеточия - файл для вывода (нужный нам файл стилей). Если вы хотите, чтобы команда выглядела более элегантно (sass bootstrap.scss:bootstrap.css), а выполнять ее можно было прямо в папке проекта, тогда вы должны указать путь к вашему компилятору в переменной окружения PATH.
После компиляции в каталоге scss должны появиться файлы: bootstrap.css.map и bootstrap.css. Первый нам не нужен, а второй — этот как раз тот самый файл, который Bootstrap предоставляет по умолчанию. Его мы и будем настраивать. Однако в саму папку исходников готовые стили помещать не нужно, это мы сделали, просто чтобы понять, что все работает правильно. Теперь кое-что изменим.
Удалите только что скомпилированные файлы. Затем скопируйте файл bootstrap.scss и поместите его в корневую директорию проекта. Измените в нем все пути к исходникам, учитывая смену каталога. Например, @import "functions" замените на @import "scss/functions".
В папке исходников есть файл _variables.scss, в нем содержатся почти все переменные для настройки Bootstrap. Вы можете редактировать его непосредственно, но лучше этого не делать. Создайте его копию так же в корне сайта, а затем удалите из него все содержимое. При компиляции SASS будет вначале брать переменные из вашего дубликата, а затем из оригинала. Чтобы эти слова подтвердить, внесите в ваш чистый файл следующие строки:
$enable-rounded: false;
$input-btn-focus-width: .1rem;
По умолчанию Bootstrap применяет ко всем элементам управления (кнопки, поля и пр.) закругление углов, а также при фокусировке на этих элементах толщина их границ составляет 0.25rem. Но сейчас мы это изменим. Чтобы новые переменные были подхвачены компилятором, в главном файле bootstrap.scss укажите путь к источнику новых переменных, но сделайте это в самом начале файла. Расширение указывать не нужно:
@import "variables";
Теперь в списке у вас два файла variables. Если компилятор нашел переменную в вашем файле, то он уже не будет ее искать в первоисточнике. После компиляции появится ваш новый файл стилей. Проверьте его работу.
Если видите изменения, значит, вы все сделали правильно, поэтому должны понять основной смысл сборки. Все переменные, с которыми вы будете работать, находятся в исходном файле _variables.scss. Копируйте из него переменные с их значениями, помещайте их в ваш дубликат, изменяйте значения, после чего компилируйте. Значения всех переменных рассматриваться не будут, так как в этом нет смысла. Некоторые из них описаны в документации, назначения остальных вы поймете по их наименованиям и комментариям к ним. Экспериментируйте. Создавайте свои собственные переменные. Вы не должны изменять оригинальный файл _variables.scss, так как если вы запутаетесь, то всегда сможете вернуться к сборке Bootstrap по умолчанию, просто очистив ваш дубликат.
Одно из основных преимуществ самостоятельной сборки в том, что можно сократить конечный стилевой файл практически до минимума, и это ускорит загрузку страниц. Вам нужно просто поставить две косые черты перед импортом того или иного модуля. Например, если нужно отключить "Карусель":
// @import "scss/carousel";
Более того, Bootstrap предоставляет что-то вроде готовой архитектуры для дальнейшего расширения. Вы можете отключать ненужные компоненты, но подключать свои собственные, по тому же принципу, как это делается в Bootstrap. Ваши компоненты могут использовать общий файл переменных, что позволяет централизованно управлять вашим HTML-шаблоном.
Профессиональные верстальщики накапливают свои компоненты, представляющие собой файлы с расширением .scss, сортируют их по отдельным папкам, и когда какие-то из них понадобятся, они просто импортируют их в общий файл, а через файл с переменными редактируют всю стилистику. Такой подход не только ускоряет работу, но и позволяет достичь главной цели — работа, проведенная когда-то, не уходит бесследно, — помимо оплаты у разработчика остаются наработки, которые в дальнейшем экономят время.
На момент написания этой статьи общий файл переменных состоял почти из полутора тысяч строк, где каждая что-то значит. Возможностей довольно много. Переменные могут принимать значения других переменных, так образуется некая структура данных, в которой существуют значения для общего поведения Bootstrap, а также его частей.
В интернете часто говорят, что сайты на Bootstrap однотипны. Но, простите, с помощью переменных вы можете изменять не только размеры кнопок, но и размеры самой сетки, а также точки останова для медиа-запросов. Так что Bootstrap вовсе не навязывает вам свою стилевую концепцию, а наоборот, позволяет сэкономить время и научиться верстать так, как это делают профи.
