css - 使用 less 和 Bootstrap 的媒体查询

Question

我才刚刚开始使用 less。为了让 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 系列类存在问题，因此它们不能立即作为 mixin 访问，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 中使用更少的整体类)。