—»     —»   Применение Bootstrap 3 с Sass
  Раздел: Фреймворки и Платформы   Комментариев: 1  

Применение Bootstrap 3 с Sass



Bootstrap идет в комплекте с Responsive Grids и несколькими популярными веб-компонентами, которые можно использовать для разработки адаптивных веб-сайтов. Если вы следили за нашими новостями, посвященными Bootstrap, то наверняка знаете, что стилизация Bootstrap реализуется при помощи LESS.

Применение Bootstrap 3 с Sass

Хотя LESS стала еще более удобной благодаря недавно представленным функциям в версии 1.5, многие из вас наверняка больше знакомы с Sass/SCSS. В Sass также можно отметить некоторые свойства, которые помогут вам в значительной степени облегчить жизнь, однако они до сих пор отсутствуют в LESS. Если вы хотите работать с Bootstrap и Sass, то, благодаря Thomas McDonald, сегодня вы можете использовать Bootstrap, портированный в Sass/SCSS.

Установка

Существует несколько способов начать работу с Bootstrap + Sass. Прежде всего, так как фреймворк был включен в Ruby gem, вы можете установить его посредством терминала используя следующую команду:

gem install bootstrap-sass

Вы также можете использовать его с Compass, используя нижеприведенную команду. Принцип схож с установкой Zurb Foundation. Однако вам следует учесть, что таким образом мы включаем лишь _variables.less, который содержит переменные Bootstrap, и styles.less, в который можно распределять стилизацию.

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

С другой стороны, вы можете просто скачать его с репозитория на Github.

Что нового в Bootstrap 3

Давайте рассмотрим несколько новых свойств в Bootstrap 3.

Плоский дизайн

Изменение, которое можно сразу же заметить в новой версии, заключается в обновленном, плоском дизайне. Градиенты и тени, настолько знакомые нам по предыдущим версиям, ушли в небытие.

Применение Bootstrap 3 с Sass

Сетка в Bootstrap 3

Bootstrap также представил нам набор новых классов и новые конструкции сетки. В 3-й версии представлены большая, средняя, маленькая и очень маленькая сетка, предназначенные для экранов разных размеров. Давайте рассмотрим следующий пример:

<div class="container">
<div class="row">
<div class="column col-md-4 col-sm-6">
<p>Left Column</p>
</div>
<div class="column col-md-4 col-sm-4">
<p>Middle Column</p>
</div>
<div class="column col-md-4 col-sm-2">
<p>Right Column</p>
</div>
</div>
</div>

У нас есть три колонки. Каждая колонка имеет равную ширину при просмотре через большие экраны (на экране домашнего ПК или на экране планшета в горизонтальной ориентации). Размер применяется при помощи класса col-md-4.

Затем, когда используется экран меньших размеров, ширина колонок будет оформлена классом col-sm-*, и таким образом в ширине колонок соблюдается нужная пропорция.

Применение Bootstrap 3 с Sass

Новые компоненты

В 3-й версии фреймворка также были добавлены новые компоненты. Среди них можно отметить Pager (необходимый для создания навигации в формате вперед-назад), List Group (группа списков), Panels (Панели) и Page Header (шапка страницы).

Применение функций Sass

Технически, для создания структуры сайта, мы можем просто добавить классы Bootstrap к HTML-элементам, что мы и сделали в вышеприведенном примере. Однако, при использовании CSS препроцессоров вроде Sass, мы можем использовать некоторые функции, которые помогут нам получить более опрятную и семантическую HTML-структуру, вместо того, чтобы пичкать документ лишними именами классов.

Учитывая вышеприведенный пример, мы можем изменить структуру и имена классов следующим образом:

<div class="container">
<div class="main-area">
<div class="column content">
<p>This is the Content.</p>
</div>
<div class="column sidebar">
<p>This is the Sidebar.</p>
</div>
<div class="column side-nav">
<p>This is the Navigation.</p>
</div>
</div>
</div>

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

.main-area {
@extend .row;
}
.column {
@extend .col-md-4;
}
.content {
@extend .col-xs-6;
@extend .col-sm-6;
}
.sidebar {
@extend .col-xs-4;
@extend .col-sm-4;
}
.side-nav {
@extend .col-sm-2;
@extend .col-sm-2;
}

С другой стороны, вы также можете использовать Sass @include, который скопирует и внедрит правила стилизации из миксинов в наши селекторы классов.

.main-area {
@include make-row;
}
.content {
@include make-xs-column(6);
@include make-sm-column(6);
}
.sidebar {
@include make-xs-column(4);
@include make-sm-column(4);
}
.side-nav {
@include make-xs-column(2);
@include make-sm-column(2);
}
.column {
@include make-md-column(4);
}

Теперь попробуйте просмотреть проект в браузере, и увидите, что у нас вышел вполне привлекательный адаптивный шаблон.

В завершение

Bootstrap и Sass – это однозначено великолепная комбинация. При помощи Bootstrap вы можете разработать функциональный адаптивный веб-сайт всего за несколько часов. А такие свойства в Sass как @extend и @include помогут вам создавать более опрятный, программируемый и гибкий CSS-код. Если вам интересно подробнее узнать о Sass, то рекомендуем вам познакомиться со статьей: Getting Started With Sass: Installation And The Basics (Учимся работать с Sass: установка и основы).

Вы уже опробовали Bootstrap и Sass?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Twitter Bootstrap, SASS
Опубликовал Design FactoRy   Прочитано (раз): 13629   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 апреля 2014 @ 07:24
Написал: dastiw1 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Bootstrap 3.1 поддерживает SCSS по умолчанию без танцев с бубном
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Апрель 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930