Bootstrap, less, how to change number of @grid-col

Question

I'm building a bootstrap 3 layout and I'm trying to change the number of columns for the nested row so that the nested columns have the same width as top-level columns. I tried something like this but to no avail.

<main id="container" class="section">
  <div class="main-body">
    <div class="sidebar">
        <p>content</p>
    </div>
    <div class="main-content">
        <div class="items">
            <div class="item-1">
                <p>content</p>
            </div>
            <div class="item-2">
                <p>Content</p>
            </div>
        </div>
    </div>
  </div>
</main>

.section{
    .container; 
}

.col-sm-2, .col-sm-10, .col-sm-8{
    border: 1px solid black;    
}
.main-body {
  .make-row();
  .sidebar {
    .make-sm-column(2);
  }
  .main-content {
    .make-sm-column(10);
  }
  @grid-columns: 10;
  .items {
    .make-row();
    .item-1{
      .make-sm-column(2);
    }
    .item-2{
      .make-sm-column(8);
    }
  }
  @grid-columns: 12;
}

The grid inside the nested row still seems to have 12 columns, and I want it to have 10. I found the example above in this: article The guy did it in sass and I rewrote it in less because I'm not much of a sass user, but unfortunately it didn't work. What am I doing wrong?

Answer 1

This should also work:

.section {
    .container;
}

.main-body {
    .make-row();

    .sidebar,
    .item-2 {
        .make-sm-column(2);
    }

    .item-1 {
        .make-sm-column(8);
    }
}

Edit: But it might be better to use Bootstraps classes in your html markup to prevent bloating your CSS file:

<main id="container" class="section">
  <div class="main-body row">
    <div class="sidebar col-sm-2">
        <p>content</p>
    </div>
    <div class="main-content">
        <div class="items">
            <div class="item-1 col-sm-8">
                <p>content</p>
            </div>
            <div class="item-2 col-sm-2">
                <p>Content</p>
            </div>
        </div>
    </div>
  </div>
</main>

Answer 2

In Less variables are lazy loaded (for more detailed/friendly tutorial on what this actually means for your code see Variable Semantics).

Thus the first problem of your snippet above is that @grid-columns: 12; at the end of the .main-body overrides @grid-columns: 10; (so that it simply has no effect there).

The second problem is more tricky, even if you remove @grid-columns: 12; at the end of the .main-body, @grid-columns: 10; still won't have any effect on the grid mixins as those will still use the value of the globally defined @grid-columns which is 12 (you could override the global value but that will apply to every grid class incl. defaults, i.e. not really our goal).

Well, to not bother you with more and more head-scratching details on variables scope, namespacing and visibility, here probably the most simple solution (among a few others):

Define @grid-columns: 10; inside .items (assuming this is the scope you need it) and then reimport the file that defines corresponding grid mixins also right inside .items, so that there you just get a copy of those grid mixins with @grid-columns: 10; applied:

.main-body {
    // here default `@grid-columns: 12` applies:
    .make-row();
    .sidebar      {.make-sm-column(2)}
    .main-content {.make-sm-column(10)}

    .items {
        // here we use 10 columns:
        @import (multiple) "<bootstrap>/less/mixins/grid.less";
        @grid-columns: 10;
        .make-row();
        .item-1 {.make-sm-column(2)}
        .item-2 {.make-sm-column(8)}
    }
}