Is it possible to extend the bootstrap css using Less?

Question

I use twitter bootstrap for some things, and came across the ease of using Less, as I can, to use the bootstrap Less variables in a second css file?

For example, calling media querys with bootstrap values:

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e!important;
    }
}

It is possible to do this in a second file without modifying bootstrap.min.css?

Answer 1

First you should use Bootstrap’s Less file instead of bootstrap.min.css and instead of adding bootstrap to your HTML you import it into your file. Less with @import '../caminho-do-seu-bootstrap/bootstrap/less/bootstrap.less'; before your settings. That way the above code will already work and you don’t even need the !important since by hierarchy your CSS will be on top.

Here in the documentation Bootstrap has the variables that you can customize. With this you customize and use the variables in your file even, after doing the @import. For example, in your Less would look something like this:

@import '../bootstrap/less/bootstrap.less';

@media (max-width: @screen-xs-max) {
    #test{
        background-color: #285e8e;
    }
}

Just as an observation, it is important to never change third party codes as it can bring you many future problems. When it comes to CSS, even if you don’t know how, assume that it will always be possible to overwrite third-party code instead of modifying it, and then you try to figure out how to do it. Most of the time just insert your CSS later and use the same classes/variables to override the properties.