Something like the following may work:
$large-screen: new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width 992px 12);
$small-screen: new-breakpoint(max-width 768px 6);
@mixin bootstrap-container {
@include outer-container;
@include media($large-screen) { max-width: 1170px; }
@include media($medium-screen) { max-width: 970px; }
@include media($small-screen) { max-width: 750px; }
}
Then just use the mixin as follows:
#foo {
@include bootstrap-container;
}
I'm interested to hear your feedback.