Question

在Meteor（nodejs）项目中，我们使用较少的CSS预处理器，我们使用第三方“bootstrap-full.less”进行css样式设计。

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

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

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

所以问题是：
在生成实际的css之前，是否可以在更少的时间内操作/处理解析的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会很有趣。

Answer 1

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

<强> master.less

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

// My custom files

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

然后你有自己的文件叫

<强> type.less

h6{
    color: @myCustomColor;
}

这样，您可以保留所有引导程序文件，并且只覆盖您需要的内容。它还可以很好地分离文件，因此如果您需要更新引导程序源，它可以轻松导航并轻松实现。

操纵第三方* .less css而不是黑客攻击它

1 个答案: