Question

I would like to have a property reference its “self”, I am not sure how to do this in LESS. Heck I am having a hard time crafting the wording of the question. Basically I would like to accomplish the following:

a:visited {
    color: lighten(color, 10%);
}

Where a‘s color could vary based on its container div.

So I might have the following selectors:

div#blue-text a {
    color: #00F;
}

div#black-text a {
    color: #000;
}

Once I visit the links, I should have a lighter blue and gray link texts respectively.

Note: this is a very simple scenario, but I have much more complicated needs, and if there is a clean way to do this, then I would be a happy camper.

Answer 1

Basically, since you’re going to set the parent’s color in LESS as well, you would store the color in a variable and reference it.

Here is an example:

@column1Color: #aaaaaa;
@column2Color: #bbbbbb;
@column3Color: #cccccc;

.columns {
    // set the color of the first column
    .column:nth-child(1) {
        background-color: @column1Color;
        a {
            color: lighten(@column1Color, 10%);
        }
    }
    // set the color of the second column
    .column:nth-child(2) {
        background-color: @column2Color;
        a {
            color: lighten(@column2Color, 10%);
        }
    }
    // set the color of the third column
    .column:nth-child(3) {
        background-color: @column3Color;
        a {
            color: lighten(@column3Color, 10%);
        }
    }
}

LESS would not know what the color of the hyperlink is unless you “told” it. Same goes for the browser, it would not know the color unless it executes all the linked CSS files.

So, what you need (if I understood you correctly) can not be achieved the way you’re thinking about it.