bootstrap 4 scss: как смешать значения pb-x pm-x в начальной загрузке с пользовательским классом?

Question

Я хочу удалить оттуда классы pb-x и pm-x:

<div class="my-title pb-4 pm-4"> ... </div>

и включить их в my-title, определенный в моем scss, который импортирует функции начальной загрузки, переменные, миксины:

Что-то вроде:

.my-title{
    @include pb-4;
    @include mb-4;
}

Но проблема в том, что таких миксинов нет (BS публикует некоторые классы как миксины, но не на этот раз).

Интервалы pb-x pm-x создаются там: https://github.com/twbs/bootstrap/blob/master/scss/utilities/_spacing.scss

И, похоже, мне нужно получить доступ к массиву $ spacers и ссылочному 4-му элементу?Как я могу это сделать?

Answer 1

Вам нужно использовать @extend вместо @import.В Bootstrap нет класса pm-4.Вы имели в виду mb-4?

.my-title{
    @extend .pb-4;
    @extend .mb-4;
}

https://www.codeply.com/go/4jpl7TRudJ

Answer 2

Вы пробовали @extend? Не уверен, что приведенный ниже код отвечает вашим целям.

.my-title{
    @extend .pb-4;
    @extend .pm-4;
}

Как вы импортировали загрузчик в файл scss, где вы определяете .my-title ? Предположим, вы определили .my-title в файле index.scss.

Затем вы можете импортировать загрузчик вверху файла index.scss , используя

@import "path/to/bootstrap.css";

Если файл .css не работает, попробуйте переименовать bootstrap.css в bootstrap.scss. Это обязательно сработает. Теперь вы можете пропустить расширение .scss из импорта, если хотите.

@import "path/to/bootstrap";

Answer 3

Поскольку $spacers было удобно определено в bs _variables.css, я обнаружил, что моя цель может быть достигнута с помощью:

.my-title {
    // ...
    padding-bottom: map-get($spacers, 3); // .pb-3
    margin-bottom: map-get($spacers, 4); // .pm-4
}

Кроме того, с помощью этого способа можно создавать собственные классы миксинов (pb-3) или заполнителей (% pb-3). Мне нравится расширять bs отсутствующими классами, которые публикуют свои переменные (например, отсутствует цвет ввода), но на этот раз я останусь с простым map-get($spacers, 3)