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是编译时动态生成的，因此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%;
  }
}

这是一个小开销，但与其他来源相比很小。

理论上你可以编译两次：

lessc bootstrap.less＆gt; bootstrap.css

lessc test.less＆gt; 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 2

您可以在SASS中扩展列

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

Answer 3

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

生成您的网格，或者只是从css中复制所有相关的类（.col-xs-1，.col-xs-2 ecc。）并将它们放入一个名为grid.less的新Less文件中（注意扩展名较少）。
将此文件导入主.less文件中，如下所示：

@import (reference) "grid.less";
现在您可以&:extend(.col-sm-6);

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

Bootstrap 3 Grid可以扩展吗？

3 个答案: