如何在 LESS 中使用这种风格的 css？答案

【问题标题】：How to utilize css of this style in LESS?如何在 LESS 中使用这种风格的 css？
【发布时间】：2012-06-13 20:34:17
【问题描述】：

我想使用一些 css 框架，但讨厌它的非语义性。所以我想用LESS。基本思想是将框架的 css 混合到我自己的类中。但我觉得 LESS 无法处理某些场景。例如，一些类在框架中定义为：

div.prepand = {...} 或者 * html .span-1 = {...}

LESS mixin 似乎不支持上述情况。有什么想法吗？

【问题讨论】：

【解决方案1】：

我不确定您所说的“某些类在框架中定义为：”是指哪个框架。

在 Less 中，你不会像你展示的那样声明 mixins。你这样做：

.my_mixin { ... }

然后在文件下方，您可以像这样（重新）使用它：

div.content {
   .my_mixin;
}

除此之外，我不明白你的问题。您想将框架的 CSS 混合到您自己的类中吗？这意味着什么？你用 Less 写 CSS 或者你不写……

【讨论】：

我的问题是混合现有的框架，如蓝图 css。对于像 span-x 这样的蓝图 CSS 样式，可以找到它们，因为它们与 mixins 兼容。但在蓝图的ie hack文件中，有一些样式定义如：html body span-x {...}。此类定义不能用作 mixins。
我认为您必须将 Blueprint 的 hack 文件并用 Less 编写，根据需要编写 mixins.. 应该不会太复杂。然后将其包含在您的项目中并使用 mixins... 我有一段时间没有使用 Blueprint，我不记得它有多复杂，但我确信它可以用 Less 重写。
我同意。重写是唯一的解决方案。实际上只有 ie hack 文件有点让人头疼。所以 ie 很烂，不是蓝图或更少。

【解决方案2】：

我刚刚将 blueprint.css 的网格部分放在 LESS here 中。您可以设置列和装订线宽度，然后像这样使用 mixins：

#header {
  .span(20);
  .prepend(2);
}

我还添加了几个示例 @media 查询，允许响应式布局。

我希望它可能对某人有用。

【讨论】：