Question

我有一个较少的文件，其中包含一个定义颜色变量的类：

.some-css-class{ 
    @color1: #E6E6E6
    @color2: #808080
    /* some other rules follow */
 }

由于这是第三方文件，我不会直接更改它。相反，我创建了自己的较少文件并导入了第三方文件。现在我想覆盖基础文件中定义的颜色，但我不能让它工作。

我试图覆盖根级别的颜色，但这样我就无法更改变量，因为它们是在基本文件的类中定义的：

/* Including base styles */
@import "base.less";

@color1: #DF007B;
@color2: #00A855;

所以我试图覆盖类中的颜色，但显然我无法以这种方式更改它们，因为无法覆盖同一范围内的变量（.som-css-class）：

/* Including base styles */
@import "base.less";

.some-css-class {
    @color1: #DF007B;
    @color2: #00A855;
}

有关我如何覆盖颜色的任何提示？

编辑：似乎没有解决方案。在我的特殊情况下，我一直在寻找一种方法来覆盖angularjs模块中的颜色（角度向导）。

正如我现在看到的，已经存在解决此问题的拉取请求： https://github.com/mgonto/angular-wizard/pull/68

Answer 1

让我们考虑一下LESS编译的方式。如果需要，您可以尝试在https://fiddlesalad.com/less编辑器中运行任何此类操作。

在这个例子中，我只包含了一些任意颜色和一个背景＆＃39;属性使其更容易理解。在您导入base.less的示例中，您实际上只是在文件中的规则之前放置了一些LESS规则。所以，只是为了澄清，如果我们＆＃34;扩展＆＃34;你的导入，文件在编译为CSS之前可能看起来像这样：

.some-css-class{ 
  @color1: red;
  background: @color1;
}

.some-css-class {
  @color1: purple;
}

这输出是什么？

.some-css-class {
  background: red;
}

为什么呢？你可能会说＆＃34;我已经重新声明了颜色变量，所以它不应该重新编译规则吗？＆＃34;。但是，这基本上不是LESS的设计方式 - 它向后兼容CSS，因此规则必须在以后覆盖以覆盖先前的规则。以此为例：

.some-css-class{ 
  @color1: red;
  background: @color1;
}

.some-css-class {
  @color1: purple;
  background: @color1;
}

以下是您现在获得的输出：

.some-css-class {
  background: red;
}

.some-css-class {
  background: purple;
}

规则被分为两个输出，并且因为第二个规则在级联中稍后发生，所以它具有更高的优先级 - 除非该类别在其他任何地方都存在，否则＆＃39;紫色＆＃39;规则优先。

没有，你懒得加载＆＃34;变量 - 从内部范围开始，它始终采用找到的最后一个值。因此：

.some-css-class {
  @color1: purple;
  background: @color1;
  @color1: blue;
}

将输出：

.some-css-class {
  background: blue;
}

然而，不幸的是，如果我们尝试将您之前的规则扩展为mixin，它会在将每个类引入新类之前解析它们的值：

.some-css-class{ 
  @color1: red;
  background: @color1;
}

.some-css-class {
  @color1: purple;
  background: @color1;
  @color1: blue;
}

.another-css-class {
  .some-css-class();
  @color1: orange;
}

输出：

.some-css-class {
  background: red;
}
.some-css-class {
  background: blue;
}
.another-css-class {
  background: red;
  background: blue;
}

＆＃34;覆盖＆＃34;的理想方式然后，这些值是将原始规则集转换为参数化mixin：

.some-css-class(@color1, @color2) { 
  background: @color1;
  color: @color2;
}

.another-css-class {
  .some-css-class(red, blue);
}

最后，您的输出将如下所示：

.another-css-class {
  background: red;
  color: blue;
}

编辑：最后，我建议您将原始规则从文件中复制出来（不修改该文件）并将其更改为您的版本中的mixin。最终，如果您可以扩展和覆盖新类的变量，那么您将获得与CSS相同的净数量。

Answer 2

你试图扩展吗？

.new-some-css-class {
    &:extend(.some-css-class);
    @color1: #DF007B;
    @color2: #00A855;
}

用LESS覆盖css类变量

2 个答案: