Bootstrap 3 Grid可以扩展吗？

Question

我正在开发一个项目,我们将保留Bootstrap较少的文件.我们也不想在HTML中使用Bootstrap类,因为我们将来可能不会使用它.我正在尝试使用"扩展"功能将我们的类名与样式表中的BS版本分组.除了网格列之外,这种方法运行良好.由于列类名是使用".make-grid"mixin构建的,我无法扩展它们.关于如何不为网格使用BS类名而不是膨胀CSS的任何想法？

如果您不熟悉extend选项,可以在此处查看文档: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是编译时动态生成的,所以无法扩展.

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

产生:

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

这有点开销,但与其他来源相比较小.

理论上你可以编译两次:

1. lessc bootstrap.less > bootstrap.css

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

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

我在bootstrap.css和test.css上做了一个差异,我发现其中包括:

>   .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 {
---

重新编译似乎更进一步:

• 将.col-md-*等放在一个新行上
• 改变例如0.75到0.75
• 改变(enabled = false)成(enabled=false)

第一眼看上去都毫无意义