Bootstrap 3网格可以扩展吗？

Ann 发表于 Dev

安

我正在做一个项目，我们要让Bootstrap的文件保持不变。我们也不想在HTML中使用Bootstrap类，因为将来可能不会使用它。我正在尝试使用“扩展”功能在样式表中将我们的类名称与BS版本进行分组。除网格列外，此方法运行良好。由于列类名称是使用“ .make-grid” mixin构建的，因此无法对其进行扩展。关于如何不在网格中使用BS类名并且不使CSS膨胀的任何想法？

如果您不熟悉扩展选项，则可以在这里查看文档：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);
}

巴斯·乔布森

.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%;
  }
}

这是一些开销，但是相对于其他源来说开销很小。

理论上，您可以编译两次：

lessc bootstrap.less > bootstrap.css

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

重新编译似乎还可以：