Question

我是新手，所以要温柔。我确信我的术语也不正确：

假设我有自己的jumbotron覆盖：

.jumbotron {
  background-color: #ff4400;
}

然后我希望有一个自定义覆盖，我继承上面的类，并仅使用其颜色作为“lighten（）”的参数覆盖其背景颜色。我无法弄清楚语法：

.Myjumbotron {
    .jumbotron;
    /* not sure what goes below for "parent.background-color" */
    background-color: lighten(parent.background-color, 30%);
}

Answer 1

LESS允许您定义变量。因此，您可以为父颜色定义变量，然后在lighten函数中使用它，如下所示：

@parentColor: #ff4400;

.jumbotron {
  background-color: @parentColor; /* Using the parent color variable */
}

.Myjumbotron {
    .jumbotron;
    background-color: lighten(@parentColor, 30%); /* Lightening the parent color */
}

Demo

注意：这会产生两个background-color设置，但这应该没问题，因为CSS将最后一个可用设置作为值，在这种情况下，它将是减轻的值。

不使用变量的选项1：要在不使用父颜色变量的情况下实现lighten或darken效果，请参阅{{3}发布的解决方法在ScottS或this thread已在评论中发布的演示。

选项2：（由seven-phases-max中的七阶段最大值贡献）

最佳替代解决方案（如果您无法修改原始.jumbotron代码以使用变量并且.myJumbotron元素不是父.jumbotron元素的子元素），则如下所示：

.jumbotron {
    background-color: #ff4400;
    color: white;
    padding: 2em;
}

.Myjumbotron:extend(.jumbotron) {
   @back: fade(white, 60%);
    background-image: linear-gradient(@back, @back);
}

comment

如何根据父变量覆盖LESS mixin变量

1 个答案: