How can I use Bootstrap styles in a LESS file?

Question

I am trying to import bootstrap.css into a .less file, so that I can conditionally apply Bootstrap styles with media-queries.

Here is my LESS code:

// Visual Studio is saying "Couldn't locate" the file for both, yet they are there:
@import url("bootstrap.min.css");
@import url("bootstrap-theme.min.css");

// ...can't find the source of the "@screen" at-rules:
@extra-small: ~"screen and (max-width: @screen-xs-max)";
@small:       ~"screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max)";
@medium:      ~"screen and (min-width: @screen-md-min) and (max-width: @screen-md-max)";
@large:       ~"screen and (min-width: @screen-lg-min)";

footer {
    text-align: center;

    // ...doesn't like the comma "or" syntax here, so "or" is used instead:
    @media @extra-small or @small {
        #linkedin-flair {
            .hide // compile error
        }
        #stackoverflow-flair {
            .hide // compile error
        }
    }

    @media @medium {
        #linkedin-flair {
            .col-sm-3 // compile error
        }
        #copyright-text {
            .col-sm-6 // compile error
        }
        #stackoverflow-flair {
            .col-sm-3 // compile error
        }
    }

    @media @large {
        #linkedin-flair {
            .col-sm-4 // compile error
        }
        #copyright-text {
            .col-sm-4 // compile error
        }
        #stackoverflow-flair {
            .col-sm-4 // compile error
        }
    }
}

...the LESS is having trouble with the @import and @screen at-rules, and with referencing any Bootstrap classes such as .hide.

I am using Visual Studio 2013, Web Essentials 2013, and Bootstrap 3.

Answer 1

1) You should prefer to download Bootstrap's LESS files and import them with @import "bootstrap.less". If you can't follow @seven-phases-max 's links and use @import (less) bootstrap.min.css

2) "// ...can't find the source of the "@screen" at-rules:" these rules are not defined in Bootstrap's LESS files. The code from the docs illustrate the boundaries of the grid defined by Bootstrap. It will show you what happens if you change the variables mentioned.

For example take a look to grid.less which defines:

@media (min-width: @screen-sm) { width: @container-sm; }

Also read: http://blog.scur.pl/2012/06/variable-media-queries-less-css/ and LESS variables in @media queries i don't think you solution won't work cause:

@screen-lg: 992px;
@large: ~"screen and (min-width: @screen-lg)";
@media @large{ color: red; }

compiles to:

@media screen and (min-width: @screen-lg) {
  color: red;
}

NB @screen-lg not set.

3) " .hide // compile error" there is no mixins called hide You could use mixins from responsive-utilities.less (see also: http://getbootstrap.com/css/#responsive-utilities)

In your case you will get something like:

//example DO NOT compile to useful CSS
@import (reference) "bootstrap.less";
#linkedin-flair
{
&:extend(.hidden-xs);
&:extend(.hidden-sm);
}

4) " .col-sm-4 // compile error" .col-sm-4 is dynamical generate (grid.less) you can't use it as a mixin.

use:

#stackoverflow-flair {
 .make-sm-column(4);
}