Как создать новый набор цветовых стилей в Bootstrap 4 с помощью sass

Я начинаю ориентироваться в замечательном Bootstrap 4, и мне интересно, как добавить совершенно новый набор цветов элементов в _custom.scss

Пример: Прямо сейчас у вас есть btn-danger, text-danger и т.д... как создать, например, используя случайное имя: "четкий" набор... так что у вас будет btn-crisp, text-crisp и т.д...

Мое предположение состояло бы в том, чтобы начать с добавления переменной

$brand-crisp: #color !default;

Но что тогда? Спасибо! Я ценю вашу помощь.


sass bootstrap-4 twitter-bootstrap-4
person Kitara    schedule 08.09.2016    source источник

Ответы (3)


arrow_upward
8
arrow_downward

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

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

.btn-custom-outline {
    @include button-outline-variant(#222222);
}

.card-custom {
    @include card-variant(#aa9999, #997777)
}

http://www.codeply.com/go/MKGQCrLwDs

Обновление: В Bootstrap 4 теперь вы можете создать новый пользовательский «цвет темы», как описано в мой ответ здесь. Это позволит вам использовать цвет в любом месте, например btn-custom, text-custom, bg-custom и т. д.

Обновить Bootstrap 4.1

Миксины кнопок немного изменились и теперь требуют дополнительных параметров...

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

.btn-custom-outline {
    @include button-outline-variant(#222222, #cece19, #222222, #cece19);
}

@import "bootstrap";
person Zim    schedule 08.09.2016
comment
Это имеет смысл! Спасибо. Кроме того, если я хочу переопределить миксин, потому что в варианте с кнопкой я не хочу становиться темнее, я хочу светлее, как мне это сделать? - person Kitara; 09.09.2016

arrow_upward
7
arrow_downward

Вам повезло, потому что сегодня я только что выпустил онлайн-инструмент, который делает именно это: https://lingtalfi.com/bootstrap4-color-generator.

Он сгенерирует необходимый код css (используя sass или нет в качестве опции) и сгенерирует 10 цветовых вариаций для цветов bootstrap4.

В конце я рекомендую создать собственный файл «my_colors.css» (или my_colors.scss) и поместить в него все сгенерированные вами цвета.

Обратите внимание, что мой инструмент меняет только цвета, ему не важны другие свойства (отступы, размер шрифта и т. д.).

Надеюсь это поможет.

person ling    schedule 24.05.2019
comment
Отличный инструмент! - person Diego Sagrera; 18.02.2020
comment
Вы, сэр, звезда ???????????? - person Justin Schier; 11.03.2020
comment
Отличный инструмент, но я нашел ошибку. Введите этот цвет #E4F1F6, и вы получите недопустимый результат. Например: цвет фона: #17d140129; - person HomeIsWhereThePcIs; 05.07.2020

arrow_upward
3
arrow_downward

Я создаю полностью настраиваемые цвета и добавляю цвета, создавая custom.scss, добавляя новые цвета темы, а затем компилируя их в custom.css. Ниже приведен пример изменения цветов темы, а также добавления нового цвета (фиолетового). Обратите внимание, что вам нужно импортировать bootstrap.scss в конец файла, чтобы это работало. Вот пример:

$theme-colors: (
   "primary": #7189bf,
   "secondary": #667,
   "success": #72d6c9,
   "info": #00aedb,
   "warning": #df7599,
   "danger": #ffc785,
   "purple": #b19cd9,
);

@import '../../bootstrap/scss/bootstrap';

Есть и другие способы, я просто считаю, что это самый простой для меня. В bootstrap 4 можно настроить гораздо больше, и это также можно сделать в этом файле с переменными и т. д.

Я создал шаблон, который использует этот метод, а также показывает, как выглядят все элементы с новыми цветами темы. Я взял то, что нашел в Интернете, и собрал это для себя — не стесняйтесь использовать это для себя, изменять и т. д.

Вот ссылка: https://github.com/steveshead/bootstrap4-elements-v2

person Steve Shead    schedule 27.07.2019
comment
Вы случайно не получили двойную переменную :root для фиолетового цвета, как у меня. Конечно, работает как задумано. Просто проверяя инспектор Chrome, у меня есть 2 фиолетовые переменные, где одна переопределяет другую. - person yansusanto; 02.05.2020
comment
Разница здесь в том, что вы создаете еще один класс служебных цветов — технически вы можете называть его как угодно. В случае, который я описал выше, попробуйте изменить фиолетовый на пользовательский (например) и посмотрите, сработает ли это. Несмотря на то, что в Bootstrap 4 есть основные цвета, только шесть классов являются базовыми вспомогательными цветами. Я надеюсь, что в этом есть смысл. - person Steve Shead; 03.05.2020