我刚开始少花钱。为了减少标签上Bootstrap的众多类,我尝试用更少的东西编写一些简单的包装器。

我的代码完整如下。

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

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

content {
    .span8;
}

side {
    .span4;
}


这个较少文件的目的是提供看起来很漂亮的包装器,它们可以完成一件事情,例如Bootstrap的.span12类。我会及时将其扩展到各种按钮。

无论哪种方式,使用lessc style.less编译较少的文件时,我都会遇到问题。

它给出的错误是:

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


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

无论如何,是否要包装已经具有媒体查询的类,还是我只需要吸收它并为包装器编写自己的类?

最佳答案

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

首先,存在一些问题,即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中使用较少的整体类)。

关于css - 使用更少和Bootstrap进行媒体查询,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17196668/

10-12 12:35
查看更多