1

在 Meteor (nodejs) 项目中，我们使用较少的 CSS 预处理器，并使用第 3 方“bootstrap-full.less”作为我们的 css 样式。

我想在引导程序中有一个（可能更多）CSS规则，因为它有条件地覆盖其他规则。（详情如下）

但是，我不想“破解”原始引导文件，因为那是“供应商代码”。

我知道我可以重新覆盖 CSS 规则，但这需要更多的工作和麻烦。

所以问题是：
在生成实际的 css 之前，是否可以在 less 中操作/处理解析的 css 规则？

特别是这里有这个规则，

@media (max-width: 767px) {
  ...
  // Make all grid-sized elements block level again
  [class*="span"],
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: auto;
    margin-left: 0;
  }

这在我的情况下是不可取的，因为我们只在侧边栏上有这个，即使在移动设备上也保持相同的宽度。所以它应该继续表现得像一个带有浮动单元格（span1、span2 等）的表格。

好吧，也许我会为我的 CSS / bootstrap 问题找到一个不同的解决方案，但如果 less 允许我操纵它产生的 css 仍然会很有趣。

4

1 回答 1

1

我在我的项目中所做的是创建一个主.less文件，并在该文件中导入我的第三方少文件，然后遵循我的自定义文件。您要更新的任何类，.less在您自己的目录中创建一个包含该类的重复文件，然后只需在文件中编辑您要更改的属性。例如：

无主

@import "/static/bootstrap/less/bootstrap.less";

// My custom files

@import "scaffolding.less";
@import "type.less";

然后你有你自己的文件叫做

无类型

h6{
    color: @myCustomColor;
}

这样，您就可以保持所有引导文件完好无损，并且只覆盖您需要的文件。它还可以很好地分离文件，因此如果您需要更新引导程序源，它很容易导航并且也很容易。

于 2012-12-15T04:25:13.547 回答