Как я могу получить имя переменной в переменной LESS?

Question

У меня есть этот код:

// 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); 

Я надеюсь, что вы можете увидеть, что я пытаюсь сделать. Мне нужен вывод @ catColor1, который LESS затем скомпилирует в мой гексаговый цвет, сохраненный в этой переменной.

Возможно ли это? Есть ли способ лучше?

Answer 1

Вам нужно вложить оба вызова в строку. Я сделал обработку всех пройти через один новую переменную useColor (который вы не должны делать, я просто думаю, что это выглядит чище):

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

Так предполагая этот МЕНЬШЕ:

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

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

Производит этот 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; 
}