Bootstrap 3 Grid 可以扩展吗？

Question

我正在处理一个项目，我们将保留 Bootstrap 较少的文件。我们也不想在 HTML 中使用 Bootstrap 类，因为我们将来可能不会使用它。我正在尝试使用“扩展”功能将我们的类名与样式表中的 BS 版本分组。除了网格列之外，这效果很好。由于列类名称是使用“.make-grid”混合构建的，因此我无法扩展它们。关于如何不将 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);
}

Answer 1

如前所述，网格无法真正扩展，因此必须找到替代解决方案。即使接受的答案是正确的，我还是想分享另一种可以考虑的方法。

1. 生成您的网格或简单地从 css 中复制所有相关的类（.col-xs-1、.col-xs-2 ecc.）并将它们放入一个名为 grid.less 的新 Less 文件中（注意 less 扩展名）。

2. 将此文件导入您的主 .less 文件中，如下所示：

   @import (reference) "grid.less";

3. 现在你可以&:extend(.col-sm-6);

使用(reference) 导入将生成一个没有任何.col-xx-x 类痕迹的css，并且只会写入您实际使用的值。

Answer 2

.col-sm-6是编译时动态生成的，所以can not extended。

.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 更改为 .75
• 将(enabled = false) 更改为(enabled=false)

乍看之下毫无意义

Answer 3

您可以在 SASS 中扩展列

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