Использование Bootstrap 3 с Sass

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

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

Рекомендуемое Чтение: Взгляд в: Фонд 4 Отзывчивая Структура

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Установка

Есть несколько способов начать использовать Bootstrap + Sass. Во-первых, так как он был включен как рубиновый каменьВы можете установить его через Терминал с помощью следующей командной строки:

gem install bootstrap-sass

Вы также можете использовать его вместе с Compass с этой командой ниже. Это так же, как мы устанавливаем Zurb Foundation. Но, пожалуйста, обратите внимание, что этот путь будет включать только _variables.less, содержащий переменные Bootstrap, и styles.less, где вы размещаете свои собственные правила стиля.

compass create my-new-project -r bootstrap-sass – использование начальной загрузки

Кроме того, вы можете просто загрузить его из репозитория Github.

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

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

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

Левый столбец

Средняя колонна

Правая колонка

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

Затем, когда размер экрана становится меньше, деление ширины столбца будет скорректировано с помощью класса col-sm- *, чтобы ширина столбца могла оставаться в правильной пропорции, а не просто складываться, как в предыдущей версии Bootstrap.

Новые компоненты
Также есть несколько новых Компонентов, добавленных в версии 3. Это включает Пейджер (используется для построения навигации типа Next-and-Prev), Список группы, Панели, а также Заголовок страницы,

Использование функций Sass

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

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

Это Контент.

    </div>
    <div class="column sidebar">
        <p>Это боковая панель.</p>
    </div>
    <div class="column side-nav">
        <p>Это навигация.</p>
    </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, который будет копировать и включать правила стилей из mixins в наши селекторы классов.

.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 можно узнать из этой статьи: Начало работы с Sass: установка и основы.

Итак, вы пробовали Bootstrap + Sass?

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>