Include responsive styles based on LESS variable

Created by: richardp-au

It makes sense to include the responsive CSS in the same file as the other CSS (one HTTP request instead of two). However, it's also a good idea to make it easy for people to include or exclude the responsive styles (and indeed this is why Bootstrap separates them into two files).

I'd suggest using a LESS variable to control the inclusion of the responsive styles in the output CSS. This can be done using pattern-matching in LESS.

In variables.less, add:

@responsive: true; // or anything else (e.g.: false) to disable

In bootstrap.less add:

// Responsive styles
.responsive(@_) {
}
.responsive(true) {
  @import "responsive.less";
}
.responsive(@responsive);

Now, simply by changing the @responsive variable, you can control the inclusion of responsive.less.

LESS will match the .responsive(@responsive) statement to either of the .responsive(...) mixins depending on the value of the first parameter. The .responsive(true) mixin is only matched when the @responsive variable is true. The .responsive(@_) mixin is matched all the time and this is required to prevent the LESS compiler throwing an error because it couldn't find a matching mixin for non-true values in @responsive.