Question

我刚刚开始少花钱。为了尝试在标签上创建不那么难看的Bootstrap的大量类，我试图用更少的东西编写一些简单的包装器。

我的代码完整性如下。

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

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

content {
    .span8;
}

side {
    .span4;
}

这个较少文件的目的是提供漂亮的包装器来做一件事，比如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中使用较少的整体类）。

使用less和Bootstrap的媒体查询

1 个答案:

这种方法会遇到一些主要问题。