在LESS操作中使用变量定义变量名称 [英] Define variable name with variable in LESS operation

问题描述

有人可以解释为什么此代码不起作用:

Can someone please explain why this code doesn't work:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~"@{@{theme}-1}";
  @color-2:fade(~"@{@{theme}-2}", 10%); //doesn't work
  body.@{theme} .button{
    background:@color-1;
    color:@color-2;
  }
}

.setTheme(~"red");

谢谢；

推荐答案

这是一个错误

对于已提交的，颜色功能存在问题.

不要尝试在一个字符串中进行两个调用.将变量值设置为内部变量.然后，当您使用它们时，直接使用@@语法.像这样:

Don't try to do both calls in one string. Set the variable value to your inner variables. Then when you use them, use the @@ syntax directly. Like this:

@red-1:#ff0000;
@red-2:#990000;
@blue-1:#000ff;
@blue-2:#00099;

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  @color-2faded: fade(@@color-2, 10%);
  body.@{theme} .button{
    background:@@color-1;
    color:@color-2faded;
  }
}

.setTheme(~"red");

或者没有额外的变量:

.setTheme(@theme){
  @color-1:~"@{theme}-1";
  @color-2:~"@{theme}-2"; 
  body.@{theme} .button{
    background:@@color-1;
    color: fade(@@color-2, 10%);
  }
}

这篇关于在LESS操作中使用变量定义变量名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！