Статьи

5 полезных Sass Mixins в Bootstrap

Октябрь 12, 2018

Как многие из вас, вероятно, знают, Bootstrap — это мощный инструментарий для разработчиков переднего плана. Это позволяет нам создавать чистые, отзывчивые сайты, которые работают на нескольких устройствах.

Если вы используете Bootstrap для серьезной разработки, есть большая вероятность, что вы используете его реализации Less или Sass .

В соответствии с этим, ниже я опишу 5 миксинов Bootstrap, которые, я думаю, вам стоит попробовать. Они встроены прямо в фреймворк как в Sass, так и Less, и могут сэкономить вам время на программирование вашего следующего сайта. В этом посте я буду конкретно обсуждать версии миксов из Sass.

@mixin make-row ()

make-row() делает именно то, что говорит, генерируя строку в сетке. Зачем использовать этот миксин вместо простого добавления класса .row Две причины Во-первых, мы можем использовать семантический код, поэтому вместо: 

 <div class="row">

мы можем использовать что-то вроде: 

 <section>

Таким образом, мы можем использовать соответствующий тег ( sectionarticle Это может потенциально облегчить чтение кода и понять, какой контент идет в этой строке. Все, что нам нужно сделать сейчас, это 

 section {
    @include make-row();
}

Очень полезно, как вы можете видеть, но настоящая полезность этого миксина разблокируется, когда вы комбинируете его использование со следующим миксином.

@mixin make — * — column ()

Этот миксин работает вместе с @mixin make-row()является группой миксинов . Один из миксинов позволяет вам определять размер столбца, который вы хотите использовать, в то время как другие позволяют перемещать, вытягивать и смещать столбцы.

Если вы знакомы с Bootstrap (или любой сеточной системой), сеточная система основана на строках, содержащих столбцы. Поскольку, вероятно, никогда не будет ситуации, когда вы используете один из миксинов столбцов без миксина make-row() 

 section {
    @include make-row();
    article {
        @include make-lg-column(2);
    }
}

Родительский раздел создает строку, содержащую наши вложенные столбцы. В этом случае каждая статья будет состоять из 2 столбцов. В результате вы можете создать до 6 разделов статьи, чтобы охватить 12 столбцов страницы. 

 <section>
    <article>column 1</article>
    <article>column 2</article>
<section>

Если у вас есть сайт, где каждая страница имеет одинаковый макет, вы можете создать весь макет в Sass. Даже если каждая страница отличается, вы можете использовать эти миксины для размещения статических частей сайта, таких как верхние и нижние колонтитулы.

@mixin size ()

Mixin size () — это простой, но чрезвычайно полезный миксин. При создании строк и столбцов в Bootstrap поведение по умолчанию заключается в определении размера столбцов в зависимости от их содержимого. Это хорошо во многих ситуациях, но иногда вам нужен определенный размер. Вот где приходит размер mixin. Он принимает два аргумента — ширину и высоту: 

 .example {
    @include size (16%, 300px)
}

В этом случае я выбрал процент для ширины (сохраняя его отзывчивым). Конечно, вы всегда можете просто установить ширину и высоту вручную в простом CSS, но это делает то же самое в одной строке кода. Этот миксин также имеет компаньон @mixin square () , который принимает один аргумент.

@mixin панель-вариант ()

Один из недостатков, с которыми сталкивается большинство людей с помощью Bootstrap, заключается в том, что большинство созданных на нем сайтов выглядят одинаково. Это потому, что многие люди берут запасные компоненты и используют их как есть. Хотя это прекрасно, многие из нас, кто использует Bootstrap, настраивают каждый используемый нами компонент.

В этом плане помогает mixin-вариант панели () , позволяющий легко оформлять панели . Миксин принимает четыре аргумента: $border$heading-text-color$heading-bg-color$heading-border 

 .panelrow {
    @include panel-variant(#d01919, #1cf21c, #000000, #bad017);
}

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

 <div class="panel panel-default panelrow">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

@mixin кнопка-вариант ()

Еще один миксин, предназначенный для легкой настройки компонентов Bootstrap, миксин button-Вариант () позволяет стилизовать кнопки. Этот миксин принимает три аргумента — $color$background$border 

 .custom-btn {
        @include button-variant(#cece19, #000000, #2dbe27);
    }

@ миксин градиент — * ()

На самом деле это группа миксинов, которые позволяют быстро создавать CSS-градиенты.

Примеры включают gradient-horizontal()gradient-vertical()gradient-horizontal-three-colors() Каждый миксин принимает разные аргументы, поэтому обязательно посмотрите на источник, чтобы определить, какие аргументы вам нужны.

Следующий миксин принимает четыре аргумента: $start-color$end-color$start-percent$end-percent 

 .example {
        @include gradient-horizontal(#1834cc, #1dc937, 0%, 100%);
    }

Вывод

Как вы можете видеть, в Bootstrap встроены мощные миксины. Эти 5 только царапают поверхность. Попробуйте покопаться в папке mixins в репозитории Bootstrap и осмотреться. Узнайте, какие аргументы нужны и как вы можете их использовать, а затем опробуйте их в своих собственных проектах. Вы, вероятно, обнаружите, что используете их как миксин, как и я.

51
Share: