LESS 获取可继承的属性值答案

【问题标题】：LESS get inheritable property valueLESS 获取可继承的属性值
【发布时间】：2014-08-10 17:27:55
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

inherit 属性值是对其父级相同属性的计算值的引用。在（Less）编译时这个引用，甚至父级的计算值都不存在。 darken() 函数是 Less 的内置函数，在编译时运行。所以darken()函数不能有inherit作为输入值（需要颜色值）。

在 cmets 中，@seven-phases-max 告诉您使用变量，您的代码应该如下所示：

@buttoncolor: #000;

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

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

a {
  color: red;

  &:hover{
  color: inherit;
  }
}

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

【讨论】：