Using .container as a mixin is impossible

[dminkovsky]

I am trying to avoid semantically polluting my markup with Bootstrap's selectors. Rather than including Bootstrap's classes in my HTML, I would rather incorporate its rulesets in my own rulesets.

For example, say I've already got this HTML:

<div class="content"></div>

I want to make div#content a Boostrap .container. To that end, I wish that in my LESS I could simply do:

@import "variables.less";
@import "../boostrap/less/grid.less";
.content {
  .container;
}

However, this doesn't really make my .content DIV a .container because of the @media queries in grid.less that are beyond the initial .container ruleset. They don't get included in the resulting CSS for .content. Am I missing some way I could do this with LESS?

I've searched the issues list for this and the closest topic I found was "#10160". That PR doesn't seem to address this problem.

[mdo]

Use .container-fixed() and set the width yourself as you need it.

[dminkovsky]

Thanks for your attention to this, @mdo.

Why can't the @media queries from grid.less be moved to .container-fixed(), like:

// Centered container element
.container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  .clearfix();
+
+ @media (min-width: @screen-sm) {
+    width: @container-sm;
+ }
+
+ @media (min-width: @screen-md) {
+    width: @container-md;
+ }
+ 
+ @media (min-width: @screen-lg-min) {
+    width: @container-lg;
+ }
}

The result in grid.less would be identical—it would simply be achieved by .container { .container-fixed(); } without further specification in the media queries below, and .container-fixed() would be a full-fledged "mobile first" mixin.

[mdo]

The intention of the .container-fixed() mixin is not to house all our break points—and we can't change it to do that at this point since it's be a break of backwards compatibility. It's a method of generating a centered containing element. That said, we could do that for the regular .container class and simply move those declarations from the existing media queries into their own per your example.

[dminkovsky]

Thank you @mdo. If I understood you correctly, how about the change proposed in the above-listed PR?

The result is that

@import "less/variables.less"; 
@import "less/mixins.less";
@import "less/grid.less";

#elem {
  .container;
}

yields:

// ... [ @import code exclude ]
#elem {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
#elem:before,
#elem:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
#elem:after {
  clear: both;
}
@media (min-width: 768px) {
  #elem {
    width: 750px;
  }
}
@media (min-width: 992px) {
  #elem {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  #elem {
    width: 1170px;
  }
}

Thus, .container is usable as a responsive mixin in its Bootstrap entirety.

[dineshdh]

Hi @dminkovsky

Can't you just extend your class

.content {
    &:extend(.container);
}

[fatuk]

I've tried this way and it's ok. Here is sample

.wrapper {
    &:extend(.container);

    .block {
        &:extend(.row);

        .content {
            &:extend(.col-md-8, .col-sm-12);
            background: orange;
        }

        .aside {
            &:extend(.col-md-4, .col-sm-12);
            background: yellowgreen;
        } 
    }
}

[dminkovsky]

@dineshdh: thanks for this-- I haven't had a chance to try it out but will test this and let you know soon. Would love to solve this with LESS, but I didn't know about extend().

[dminkovsky]

So yeah, @dineshdh, your suggestion is totally sufficient. Finally had a chance to use this. No patch needed. Compiles with with lessc ~1.4.

However, the grunt-recess that's with the latest Bootstrap won't compile &:extend(). So if you want to custom build with Bootstrap's grunt setup then you are out of luck. In Bootstrap's package.json, grunt-recess is currently at ~0.4.0. This version requires "recess": "~1.1.6" which in turn is using "less": "~1.3.0". And we need ~1.4.0.

The thing is, recess or grunt-recess don't seem to be compatible with 1.4 or 1.5. When you swap either of those in, you get:

$ grunt dist-css
Running "recess:css" (recess) task
Fatal error: Cannot read property 'data' of undefined

What to do? Such a good solution here. Would love to use it.

Thank you,
DM

[dminkovsky]

Thank you for the time you put into this @mdo. Greatest appreciation..