LESS获得可继承的属性值

Question

如何获得LESS可继承属性值 例如：

.btn { 
  color: #000;
  &:after {
    color: darken(inherit, 15%);
  }
}

Answer 1

Less编译器将较少的代码编译为静态CSS代码，并且不计算任何属性值。浏览器使用静态CSS代码来计算CSS属性的值。

inherit属性值是对其父级的同一属性的计算值的引用。在（Less）编译时此引用，甚至父项的计算值都不存在。 darken（）函数是Less的内置函数，在编译时运行。因此，darken（）函数不能将inherit作为输入值（需要颜色值）。

在评论@ seven-phases-max中告诉你使用变量，而你的代码看起来应如下所示：

@buttoncolor: #000;

.btn { 
  color: @buttoncolor;
  &:after {
    color: darken(@buttoncolor, 15%);
  }
}

请注意，Less中不禁止使用inherit属性值。例如，以下Less代码将在有效且有效的CSS代码中编译：

a {
  color: red;

  &:hover{
  color: inherit;
  }
}

出于同样的原因，我们可以预期你应该允许你在CSS（3）函数中使用inherit属性值，例如width: calc(inherit - 2em);这也是不可能的，尽管出于不同的原因，请参阅CSS calc with inherit