Как элегантно перекрывать свойства bootstrap?

Question

[Вячеслав Лебедев]

Добрый вечер!

Использую компоненты bootstrap для сборки в проекте.
Частенько приходится перекрывать некоторые свойства.
К примеру:
outline: none
Есть ли более элегантный выход из такой ситуации? (миксины?)
Спасибо!

Answer 1

[Сергей delphinpro]

Первое что следует сделать - попробовать настроить через _valiables.scss
Если нужной опции нет - переопределить CSS свойство в конце вашего файла
styles.scss:
import bootstrap
.button { ... }

Если таких переопределений будет много (порог сами определите), то можно переопределить некоторые миксины бутстрапа.
// Core variables and mixins
import "variables";
import "mixins";
// тут ваши переопределлные миксины
.. дальше остальной бутстрап

Тут фишка в том, что из двух миксинов с одинаковым именем будет использован тот, что позже объявлен в коде.

upd не обратил внимания что у вас stylus. не знаю как он реагирует на повторное объявление миксина.

Comments

[Вячеслав Лебедев]

Попробую перекрывать переменные в variables. Этого мне будет достаточно.
Спасибо! :)

Answer 2

[sim3x]

Есть ли более элегантный выход из такой ситуации? (миксины?)

https://learnboost.github.io/stylus/docs/extend.html

.btn
    // bootstrap styles

.mybtn
    @extends .btn
    //..

.mybtn2
    @extends .btn
    //..

или напрямую использовать миксины бутстрапа

ruby.bvision.com/blog/please-stop-embedding-bootst...