Can Bootstrap 3 Grid be extended?

Question

I am working on a project in which we leave Bootstrap fewer files intact. We also do not want to use Bootstrap classes in HTML, since we cannot use it in the future. I am experimenting using the expand function to group class names with the BS version in a stylesheet. This works well except for grid columns. Since column class names are built using mixin-grid-mix, I cannot extend them. Any thoughts on how not to use BS class names for the grid And not bloat CSS?

If you are not familiar with the extension option, you can see 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 generation at compile time, therefore cannot be 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%; } } 

This is a bit overhead, but small in relation to another source.

In theory, you can compile twice:

• lessc bootstrap.less > bootstrap.css

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

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

To do diff on 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 { --- 

re-compilation is as follows:

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

which all do not make sense at first sight

Answer 2

You can expand columns in SASS

 .cols @extend .row .col1, .col2 @extend .col-xs-6 

Answer 3

As said, the grid cannot be expanded, so you need to find an alternative solution. Although the accepted answer is correct, I would like to share a different approach that can be considered.

• Create a grid or just copy all the relevant classes ( .col-xs-1 , .col-xs-2 ecc.) From css and put them in a new smaller file called grid.less (note the smaller extension).

• Import this file into the main .less file .less this:

  @import (reference) "grid.less";

• Now you can &:extend(.col-sm-6);

Importing with (reference) will generate css without any trace of the .col-xx-x classes and will only write the values ​​that you actually are .