如何覆盖基于父变量的LESS mixin变量 [英] How to override a LESS mixin variable based on a parent's variable

问题描述

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

I am a newbie, so be gentle. I am sure my terminology is incorrect too:

假设我有自己的jumbotron覆盖：

suppose I have my own jumbotron override:

.jumbotron {
  background-color: #ff4400;
}

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

and then I want to have a custom override of that where I inherit the above class and only override its background color using its color as a parameter to "lighten()". I can't figure out the syntax:

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

推荐答案

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

LESS allows you to define variables. So you can define a variable for the parent's color and then use it within the lighten function like below:

@parentColor: #ff4400;

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

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

演示

/ strong>这将产生两个 background-color 设置，但是应该很好，因为CSS将最后一个可用设置作为值，在这种情况下，它将是减轻的值。

Note: This would produce two background-color setting but that should be fine because CSS takes the last available setting as the value and in this case it would be the lightened value.

选项1，不使用变量：实现 lighten 或 darken 效果，而不使用父颜色变量，请参阅 ScottS a> 此主题 或演示七相最大已发布在评论中。

Option 1 without using variables: For achieving the lighten or darken effect without using a parent color variable, refer to the work-around answer posted by ScottS in this thread or the demo that seven-phases-max has posted in the comments.

选项2：（由七个阶段最多提供）评论）

Option 2: (contributed by seven-phases-max in this comment)

最佳替代解决方案（如果您不能修改原始的 .jumbotron 代码以使用变量，并使 .myJumbotron 元素不是父< c $ c> .jumbotron 元素）如下：

Best alternative solution (if you cannot modify the original .jumbotron code to use variables and have the .myJumbotron element as not a child of the parent .jumbotron element) would be the below:

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

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

选项2演示

这篇关于如何覆盖基于父变量的LESS mixin变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！