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
.