How can I have a variable name in a variable in LESS?

Question

I have this code snippet:

// Color settings 
.setCat(@x) {
    .cat@{x} {
        .menu-link {
            &.selected, &:hover { background: ~@{"catColor@{x}"}; }
            &:hover:after { border-top-color: ~@{"catColor@{x}"}; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: ~@{"catColor@{x}"}; }
    }
}

.setCat(1);

I hope you can see what I am trying to do. I want the @catColor1 output which LESS then will compile into my hex color stored in that variable.

Is this possible? Is there a better way?

Your code, although comprehensive, lacks enough explanation. I'd like to help but I would also want you to elaborate this a little bit. — AdityaSaxena
– AdityaSaxena, Commented May 30, 2013 at 11:50

ScottS · Accepted Answer · 2013-05-30 13:52:21Z

You need to nest both calls into the string. I've made the processing all go through a single new variable useColor (which you do not have to do, I just think it looks cleaner):

.setCat(@x) {
    .cat@{x} {
        @useColor: ~"@{catColor@{x}}";
        .menu-link {
            &.selected, &:hover { background: @useColor; }
            &:hover:after { border-top-color: @useColor; }
            &:only-child:after { border-top-color: transparent; }
        }
        .menu-link-submenu { background: @useColor; }
    }
}

So assuming this LESS:

@catColor1: #fff;
@catColor2: #aaa;

.setCat(1);
.setCat(2);

Produces this CSS:

.cat1 .menu-link.selected,
.cat1 .menu-link:hover {
  background: #ffffff;
}
.cat1 .menu-link:hover:after {
  border-top-color: #ffffff;
}
.cat1 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat1 .menu-link-submenu {
  background: #ffffff;
}
.cat2 .menu-link.selected,
.cat2 .menu-link:hover {
  background: #aaaaaa;
}
.cat2 .menu-link:hover:after {
  border-top-color: #aaaaaa;
}
.cat2 .menu-link:only-child:after {
  border-top-color: transparent;
}
.cat2 .menu-link-submenu {
  background: #aaaaaa;
}

Collectives™ on Stack Overflow

How can I have a variable name in a variable in LESS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related