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

Question

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

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

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

Answer 1

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

在 Less 中，您不会按照显示的方式声明 mixin。你这样做：

.my_mixin { ... }

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

div.content {
   .my_mixin;
}

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

Answer 2

我刚刚在 此处 中将 blueprint.css 的网格部分放在一起。您可以设置列和装订线宽度，然后使用这样的混合：

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

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

我希望它对某人有用。