How to gracefully override bootstrap properties?

Question

Bootstrap

Good evening!

I am using bootstrap components to build in a project.
Often it is necessary to overlap some properties.
For example:
outline: none
Is there a more elegant way out of this situation? (mixins?)
Thanks!

Answer 1

The first thing to do is to try to set it up via _valiables.scss
If there is no required option, override the CSS property at the end of your
styles.scss file:
import bootstrap
.button { ... }
If there are many such overrides (define the threshold yourself), then you can override some bootstrap mixins.
// Core variables and mixins
import "variables";
import "mixins";
// here are your redefined mixins
.. then the rest of the bootstrap
Here the trick is that of the two mixins with the same name, the one declared later in the code will be used.
upd did not notice that you have a stylus. I don’t know how he reacts to the re-declaration of the mixin.

Answer 2

Is there a more elegant way out of this situation? (mixins?)

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

.btn
    // bootstrap styles

.mybtn
    @extends .btn
    //..

.mybtn2
    @extends .btn
    //..

or directly use the bootstrap
mixins ruby.bvision.com/blog/please-stop-embedding-bootst...