Can Bootstrap 3 Grid Be Extended?

Question

I'm working on a project where we are leaving the Bootstrap less files untouched. We also do not want to use Bootstrap classes in the HTML, since we may not use it in the future. I'm experimenting with using the "extend" feature to group our class names with the BS version in the style sheet. This has worked well except with the grid columns. Since the column class names are built with the ".make-grid" mixin, I can't extend them. Any thoughts on how to not use BS classnames for the grid AND not bloat the CSS?

If you are unfamiliar with the extend option, you can view the documentation here: http://www.lesscss.org/#-extend

//Not ideal because it duplicates declarations.
.mytable {
  .table;
}

//Good because it groups the selectors instead of duplicating declarations.
.mytable {
  &:extend(.table all);
}

//This does not work, but I wish it did.
.search {
  &:extend(.col-sm-6); 
}

//This is not ideal because it duplicates declarations.
.search {
  .make-sm-column(6);
}

Answer 1

.col-sm-6 is dynamic generate on compilation time, so can not extended.

.search {
  .make-sm-column(6);
}

generates:

.search {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .search {
    float: left;
    width: 50%;
  }
}

Which is a little overhead, but small in relation to the other source.

In theory you can can compile twice:

1. lessc bootstrap.less > bootstrap.css

2. lessc test.less > test.css, with test.less:

   @import (less) "bootstrap.css";
   .search {
     &:extend(.col-sm-6);
   }
   

doing a diff over bootstrap.css and test.css i found as expected among others:

>   .col-sm-6,
>   .search {
1010c1082,1093
<   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
---

recompiling seems futher:

• put .col-md-* etc. on a new line
• change for example 0.75 to .75
• change (enabled = false) into (enabled=false)

which all make no sense on the first sight