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

Question

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

假设我有自己的超大屏幕覆盖:

.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 将最后一个可用设置作为值，在本例中它将是减轻值(value)。

不使用变量的选项 1:要在不使用父颜色变量的情况下实现 lighten 或 darken 效果，请参阅变通方法ScottS 发布的答案在 this thread或 seven-phases-max 的演示已在评论中发布。

选项 2:(由 seven-phases-max 在此 comment 中提供)

最佳替代解决方案(如果您无法修改原始 .jumbotron 代码以使用变量并且使 .myJumbotron 元素不是父 的子元素。 jumbotron 元素)将如下所示:

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

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

Demo for Option 2