Question

我有以下代码：

@red_SOPRA: orange;
@red: red;
.gradient(@color) when (@color = red)
{
  background: linear-gradient( 180deg, @color 0%,yellow 100%);
}

div
{
  .gradient(red);
}

编译成：

div {
  background: linear-gradient(180deg, #ff0000 0%, #ffff00 100%);
}

我想添加＆＃34; _SOPRA ＆＃34;到变量＆＃34; @color＆＃34;在背景定义中出现，以获得mixin中使用的变量的插值和动态名称。

我尝试使用@@和@{color}定义，但没有成功。

如何获得这样的生成背景（值为＃34;＃ffa500＆＃34; - @red_SOPRA值 - 而不是＆＃34;＃ff0000＆＃34;）？

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}

Answer 1

选项＃1

除非我错过了你想要实现的目标，否则只需删除保护表达式when (@color = red)就会得到一个动态的＆＃34; @color的值输出，允许@red_SOPRA或@blu_SOPRA直接调用它（无论你通过什么）。

<强> LESS

@red_SOPRA: orange;
@red: red;
.gradient(@color) 
{
  background: linear-gradient( 180deg, @color 0%, yellow 100%);
}

div {
  .gradient(@red_SOPRA);
}

CSS输出

如你所愿......

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}

选项2

您可以设置mixin以执行＆＃34;＆＃39;合并＆＃39;字符串传递＆＃34;和＆＃34; _SOPRA＆＃34;后缀，像这样：

<强> LESS

@red_SOPRA: orange;
@blu_SOPRA: blue;
.gradient(@pre; @SOPRA: ~'@{pre}_SOPRA'; @color: @@SOPRA) 
{
  background: linear-gradient( 180deg, @color 0%,yellow 100%);
}

div
{
  .gradient('red');
}

.test {
  .gradient('blu');
}

CSS输出

div {
  background: linear-gradient(180deg, #ffa500 0%, #ffff00 100%);
}
.test {
  background: linear-gradient(180deg, #0000ff 0%, #ffff00 100%);
}

如果@color未解析为有效的@@SOPRA值，则不会优雅地失败。

Answer 2

首先，我要感谢ScottS的回答，特别是我需要的第二个选项。

其次，我添加了解决方案，昨天我自己发现，在哲学上非常相似，但由于临时变量，newby更容易理解（也许）更容易理解。

@red_SOPRA: orange;
@red: red;

.gradient(@color) when (@color = 'red')
{
  @stop-1:~"@{color}_SOPRA";

  background: linear-gradient( 180deg, @@stop-1 0%,yellow 100%);
}

div
{
  .gradient('red');
}

哲学是一样的，但有了这个“双通道”，我认为可能更“说话”......： - ）

更新：在正确评论七阶段 - 最大之后，我更新了我的解决方案。请注意，参数必须以'red'

的字符串形式传递

LESSCSS：mixin参数的插值

2 个答案:

选项＃1

选项2