Less：将变量传递给lighten函数 [英] Less: passing variable variable into lighten function

问题描述

这样做：

 背景颜色：〜@ {@ {space-name} -color-4} ; 
  

这不会：

  background-color：lighten（〜@ {@ {space-name} -color-4}，5％）; 
  

错误：

 code> SyntaxError：error evaluation function`lighten`：Object＃没有方法'toHSL'in ... 
  

已经有关于SO的已检查问题，这个问题似乎是类似的：

用LESS操作中的变量定义变量名称

不幸的是，这不适用于当我使用时：

  @ color4：〜@ {@ {space-name} -color-4} 
 border：1px solid @ color4; // this works 
 background-color：lighten（＃ffffff，5％）; // this works 
 background-color：lighten（@ color4,5％）; // this does not 
 background-color：lighten（@@ color4,5％）; // this does not  -  throws'SyntaxError：variable @@ {my-color-4} is in undefined in ..'虽然之前定义为@ my-color-4。不知何故double @似乎失败
 background-color：lighten（color（@ color4），5％）; // this does not 
  

看起来像是 https://github.com/less/less.js/issues/1458 ，但我无法制定解决方法

有任何建议吗？我做错了什么？

解决方案

设置mixins类似这样：

  @ space-name：space; 
 @ space-color-4：＃123456; 
 @ color4：〜'@ {space-name} -color-4';然后在你的类中，它们可以使用如下：
 
 $ b 
 
 
  .class {
 border：5px solid @@ colour4; // this works 
 background：lighten（@@ color4,25％）; // this also works 
} 
  
 
 
 
  Codepen演示 
 
This works:
background-color: ~"@{@{space-name}-color-4}";
This does not:
background-color:lighten(~"@{@{space-name}-color-4}",5%);
Error:
SyntaxError: error evaluating function `lighten`: Object # has no method 'toHSL' in ...
Checked questions on SO already and this one seems to be similar: 

Define variable name with variable in LESS operation

Unfortunately this did not work for me, when I used: 
@color4:~"@{@{space-name}-color-4}";
border: 1px solid @color4; // this works
background-color:lighten(#ffffff,5%); // this works
background-color:lighten(@color4,5%); // this doesn't
background-color:lighten(@@color4,5%); // this doesn't - throws 'SyntaxError: variable @@{my-color-4} is undefined in..' although it is defined as @my-color-4 previously. Somehow double @ seems to fail
background-color:lighten(color(@color4),5%); // this doesn't
Seems to be something with https://github.com/less/less.js/issues/1458 but I am not able to make a workaround as mentioned.

Any suggestions? What am I doing wrong?
解决方案
Set up mixins something like this:
@space-name: space;
@space-color-4: #123456;
@color4:~'@{space-name}-color-4';
Then in your class they can be used as follows:
.class {
  border: 5px solid @@color4; // this works
  background:lighten(@@color4,25%); // this also works
}


Codepen demo

                        
这篇关于Less：将变量传递给lighten函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！