Статьи

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

Ноябрь 19, 2018

Bootstrap — это популярный фреймворк с открытым исходным кодом. В комплекте с готовыми компонентами, он позволяет веб-дизайнерам всех уровней квалификации быстро создавать сайт. Последняя версия Bootstrap использует Sass в качестве предпочтительного препроцессора. В этой статье я покажу вам, как настроить и настроить проект на основе Bootstrap Sass.

Установка начальной загрузки

Есть несколько способов получить и установить исходные файлы Bootstrap. Просто помните, что какой бы метод и менеджер пакетов вы ни выбрали, убедитесь, что у вас есть компилятор Sass и Autoprefixer . Bootstrap нужен как для того, чтобы работать.

Скачать файлы Bootstrap

Мы можем загрузить файлы Bootstrap со страницы загрузки Bootstrap . После загрузки мы можем извлечь содержимое файла в папку нашего проекта.

Узел

С установленным Node.js мы можем быстро установить пакет npm для Bootstrap, введя в командной строке: 

npm install bootstrap

Ruby Gems

Мы можем включить Bootstrap в приложение Ruby, используя Bundler и Ruby Gems, с помощью этой команды в Gemfile: 

 gem 'bootstrap', '~> 4.0.0'

Bootstrap Sass Setup

После того, как мы установили Bootstrap, нам нужно настроить наш проект. Первое, что мы хотим сделать, это создать папку sassstylesheets После этого мы создаем файл с именем app.scsssass

Файл app.scss

Следующее, что мы хотим сделать, это найти файл _variables.scsssass Затем мы переименовываем файл в _customVariables.scss_customVariables.scssapp.scss Важно сначала импортировать _customVariables.scss

Последний импорт — необязательный файл _custom.scss Многие люди будут включать пользовательские правила CSS непосредственно после своих операторов импорта или в свой файл app.scss

Обратите внимание, мы сначала импортируем наш файл _customVariables.scss Причина в том, что переменные Bootstrap установлены по default! значения, поэтому нам нужно переопределить эти значения, сначала импортируя наши переменные.

Настроить

Когда мы редактируем переменные, желательно сделать копию оригинала и изменить копию. После копирования мы просто закомментируем исходную переменную. Таким образом, мы можем вернуться к тому, что было ранее установлено, если нам не понравится результат. Например, допустим, мы хотим изменить базовый размер шрифта на 20 пикселей. Сначала мы рассмотрим наш файл _customVariable.scss Переменные разбиты на разделы, и мы ищем раздел шрифтов. Там нам нужно $font-size-base:1rem !default; переменная, чтобы мы могли скопировать его в наш пользовательский файл и закомментировать оригинал. После этого это так же просто, как изменить значение на 20 пикселей: 

 //$font-size-base:1rem !default;
$font-size-base:20px;

Выше мы закомментировали исходную переменную и изменили копию.

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

Другой эффективный метод определения переменных, которые нужно изменить, — это просмотр файлов SCSS, которые составляют Bootstrap, до их компиляции. Оттуда мы можем видеть, какие переменные используются в этом модуле. Например, допустим, мы недовольны цветом элемента .navbar-dark Вместо того, чтобы пытаться выяснить, какую переменную нам нужно изменить, мы можем заглянуть в файл _navbar.scss 

 // navbar-dark
.navbar-dark {
  .navbar-brand {
    color: $navbar-dark-active-color;

    @include hover-focus {
      color: $navbar-dark-active-color;
    }
  }
  // more Sass here
}

Посмотрев на это правило, мы определим переменную, которую нам нужно изменить, это $navbar-dark-active-color Затем мы перейдем в _customVariables.scss

При использовании исходных файлов Bootstrap мы также можем использовать его миксины. Они не только помогут понять, как Bootstrap подходит друг другу, но и могут помочь нам создать наш веб-сайт. Например, давайте посмотрим на @mixin make-container 

 @mixin make-container() {
  width: 100%;
  padding-right: ($grid-gutter-width / 2);
  padding-left: ($grid-gutter-width / 2);
  margin-right: auto;
  margin-left: auto;
}

Из этого миксина мы видим, какие переменные влияют на наш контейнер. Теперь мы знаем, что можем изменить $grid-gutter-width

Вывод

Использование Bootstrap может быть сложным, особенно для тех, кто не знаком с фреймворком. С помощью методов, которые я продемонстрировал, вы сможете установить установку Bootstrap Sass и легко настроить фреймворк. Поиск переменных, которые нужно изменить, должен быть более управляемым, когда вы знаете, что искать. Просто помните, что функции поиска вашего текстового редактора — ваш друг, и, если вы сомневаетесь, поиск миксов может помочь.

Если у вас есть основы Bootstrap за поясом, но вы не знаете, как поднять свои навыки Bootstrap на следующий уровень, ознакомьтесь с нашим курсом «Создайте свой первый сайт с Bootstrap 4», чтобы быстро и весело познакомиться с мощью Bootstrap.

43
Share: