使用 less 和 Bootstrap 的媒体查询

Question

我刚刚开始使用更少。为了让 Bootstrap 在标签上的众多类变得不那么难看，我尝试在 less 中编写一些简单的包装器。

我的全部代码如下。

// Import boostrap.
@import "./less/bootstrap.less";

// General classes for content.
focus {
    .span12;
}

content {
    .span8;
}

side {
    .span4;
}

这个 less 文件的目的是提供漂亮的包装器来做一件事情，比如 Bootstrap 的 .span12 类。我会及时将其扩展到各种按钮。

不管怎样，我在使用lessc style.less编译less文件时遇到了问题。

它给出的错误是：

NameError: .span12 is undefined in /srv/http/www/style.less on line 6, column 5:
5 focus {
6     .span12;
7 }

我找到了一些 .makeColumn(i) 类的文档，但问题是 Bootstrap 已经有非常好的媒体查询，我想避免自己编写。

无论如何要包装已经有媒体查询的类，还是我需要把它吸起来并为我的包装器编写自己的？

Answer 1

您将在这种方法中遇到一些主要问题。

首先，Bootstrap 动态生成 .spanX 系列类存在问题，因此它们不能作为 mixins 立即访问，as I note in this answer。

其次，Bootstrap 的一些span 代码不是由.spanX 系列设置的，而是通过[class*="span"] 的属性选择器完成的（see, as of this writing, line 602 of the mixins.less file；它们也被广泛使用in the responsive files for the @media rules）。此选择器代码不会被包含代码的.span12 拾取，如果您没有将.span12 放入代码中，那么您的代码将不会应用这些属性。所以你需要解决这个问题。

可能还有其他问题不是很明显，但关键是，如果您想将 Bootstrap 用于网格目的（尤其是响应式），最好按照设计使用它。如果你不这样做，那么最好去复制 Bootstrap 代码并根据你的需要修改它来制作你自己的简化网格代码（如果你的意图是在你的 html 中使用更少的整体类）。