CODEWITHSUNDEEP
csslessmixins
Svend Hansen
Svend Hansen

Reputation: 3333

Less Mixin using variable in attribute selector

EDIT: The issue might be with a bug in dotless, which is what we're using.

I'm trying to write a Less Mixin method for writing out a lot of CSS styles. The general format of the method is:

.icon-styles(@name) {

    .@{name}-icon {
        background-image: url('../images/icon-@{name}.png');
        display: none;
    }

    [data-@{name}="true"] .@{name}-icon {
        display: inline-block;
    }
}

Such that the icon is only visible if a containing object has the related attribute set.

However, I'm getting an error at the attribute selector saying:

Expected ']' but found '{'

Pointing to the @ inside the square brackets.

I've found this post:

LESS mix variable into attribute name in an attribute selector expression

With a similar issue, and the answer suggests it might be a bug, but unfortunately the workaround doesn't work for me. I'm getting the same error on trying to write out attr inside the brackets.

I've also tried writing it like this:

[~'data-@{name}'="true"] .@{name}-icon {

Which gets rid of the error, but then @{name} is not resolved in the resulting css.

Does anyone know if there's any way to achieve what I want?

Upvotes: 0

Views: 4619

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

The trick is the same as suggested in LESS mix variable into attribute name in an attribute selector expression. You're just missing the main point of it: "concatenation of interpolated variables is not supported inside [attr] blocks", so you need to move out of it:

.icon-styles(@name) {

    .@{name}-icon {
        background-image: url('../images/icon-@{name}.png');
        display: none;
    }

    @data-name: ~'data-@{name}';
    [@{data-name}="true"] .@{name}-icon {
        display: inline-block;
    }
}

Upvotes: 1

Related Questions