我刚开始少花钱。为了减少标签上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/