Less Mixin using variable in attribute selector

Question

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?

Community · Accepted Answer · 2017-05-23 12:05:29Z

1

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;
    }
}

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Mar 11, 2014 at 13:02

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Svend Hansen Over a year ago

That's what I've tried. Tried it again now, just cut-n-pasting from your answer, and I still get: Expected ']' but found '{'...

Svend Hansen Over a year ago

I've also tried (just to see what would happen): [icon-name=@{name}] and I get the same error.

ScottS Over a year ago

@SvendHansen: It must be your specific LESS processor you are using, as the above code works at less2css.org back to version 1.4.

Svend Hansen Over a year ago

Seems we're using dotless, so maybe that's the issue. Cheers :)

seven-phases-max Over a year ago

@Svend Hansen Yep, dotless implements quite ancient Less version (~1.3.3) and there you need to use old selector interpolation syntax (e.g. (~"@{var}")) instead of normal @{var} (But interpolation inside attribute selectors may be not supported at all there, I do not remember for sure, sorry).

Collectives™ on Stack Overflow

Less Mixin using variable in attribute selector

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related