Bootstrap Sass – установка и настройка

Bootstrap – популярный css фреймворк с открытым исходным кодом. В комплекте с готовыми компонентами позволяет веб-дизайнерам любого уровня быстро создать сайт.

В этой статье я покажу вам, как конфигурировать и настраивать Bootstrap Sass.

Установка

Есть несколько вариантов установки Bootstrap-sass.

Загрузка

Вы можете скачать Bootstrap-sass с сайта. После скачивания вам необходимо распаковать содержимое архива в папку с проектом.

Compass

Если вы используете Compass, то у вас должен быть установлен Ruby. Для установки Bootstrap-sass необходимо ввести в командную строку:

Если у вас есть существующий Compass проект, то необходимо ввести в командную строку:

compass install bootstrap -r bootstrap-sass

Если вы хотите начать новый проект с установки Bootstrap-sass, введите:

compass create my-new-project -r bootstrap-sass --using bootstrap

Bower

Мы можем установить Bootstrap-sass с помощью пакетного менеджера Bower. Для меня это лучший вариант установки.

bower install bootstrap-sass

Настройка проекта

После того как мы установили нужную версию Bootstrap-sass, необходимо настроить проект. Первое, что необходимо сделать – создать папки для стилей css и sass (если вы используете Compass, то папки уже созданы). Папка sass содержит .scss файлы которые будут компилироваться в стили .css. Создайте в папке Sass файл style.scss (Compass создает этот файл автоматически).

Файл style.scss используется для импорта компнентов Bootstrap. В файле необходимо прописать следующие строки:

Если вы скачали:

Установили через Compass:

@import "bootstrap";

Через Bower:

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

Дальше мы должны найти файл с переменными Bootstrap-sass _variables.scss и скопировать его в нашу папку Sass. Смените имя файла на _customVariables.scss. Символ “_” в начале имени файлов означает, что файл не будет компилироваться. Если вы используете Compass, то можете пропустить этот шаг.

Вы можете импортировать файл _custom.scss, который будет содержать стили вашего проекта. Кто-то предпочитает писать свои стили непосредственно в файле style.scss после импортированных файлов Bootstrap-sass и переменных.

@import "customVariables";

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";

Обратите внимание, что мы импортируем файл с нашими переменными _customVariables.scss перед файлами Bootstrap-sass. Дело в том, что все переменные Bootstrap в устанавливаются по умолчанию и, чтобы переопределить их значения, необходимо подключить наши переменные в самом начале.

Работа с переменными

При редактировании переменных целесообразно сохранять дефолтные значения. Вы закомментировать строку с оригиналом и под ней написать своё значение.

Как вы видите, я закомментировал оригинал и написал под ним своё значение.

Имейте в виду, что Bootstrap содержит большое количество переменных. Найти нужные переменные вы сможете в файлах Bootstrap-sass. Например, мне нужно поменять оформление navbar. Я открываю файл _navbar.scss и нахожу в нм переменную отвечающую за цвет навигации.