Less 如何在选择器中使用变量

使用

.class&

我可以添加规则，将父类添加到路径中，但它总是将父类放在所有父类的前面

有什么方法可以在某个中间添加一个父类。

我尝试使用一个变量，如下所示： 无示例：

@color:”；
.a{
.b@颜色{
博士{
e{
字号：2em；
颜色：黑色；
@颜色：“黄色”；
颜色：黄色；
@颜色：“红色”；
颜色：红色；
@颜色：“；
}
f{
字体大小：1.2米；
}
}
}
}

预期产出：

.a.b.d.e{
字号：2em；
颜色：黑色；
}
a.b.黄色d.e{
颜色：黄色；
}
a.b.红色d.e{
颜色：红色；
}
.a.b.d.f{
字体大小：1.2米；
}

但那没用

那么，我如何编写一些能够以良好方式生成输出的东西呢。 我希望颜色变化接近默认颜色。

---

我不希望有不必要的重复代码=不将每种颜色的字体大小重置为相同的值。

您可以使用变量作为选择器：

@color: .yellow;
.a {
  .b @{color} {
    ...

但它在您的示例中不起作用，因为变量是从上一次使用链编译而来的（这就是为什么您可以重用变量），这意味着

。红色的
永远不会填充到您想要的位置（与黄色的位置相同，因为它位于上一个范围）

你可以做很多事情来绕开它，混合，函数，包含，映射等等，真正适合你需要的任何东西。下面是一个带有通用循环的简单示例：

@colors: cornflowerblue, green, red, yellow;

.a  {
  .b {
    each(@colors, {
      .@{value} .d {
        .e {
          color: @value;
        }
      }
    });
    .d .e { 
      font-size: 2em;
    }
    .d .f {
      font-size: 1.2em;
    }
  }
}

您可以单击代码段底部的“查看已编译的css”按钮，或查看



见《灵魂之光》中的笔（）
在…上

您可以使用变量作为选择器：

@color: .yellow;
.a {
  .b @{color} {
    ...

但它在您的示例中不起作用，因为变量是从上一次使用链编译而来的（这就是为什么您可以重用变量），这意味着
。红色的
永远不会填充到您想要的位置（与黄色的位置相同，因为它位于上一个范围）

你可以做很多事情来绕开它，混合，函数，包含，映射等等，真正适合你需要的任何东西。下面是一个带有通用循环的简单示例：

@colors: cornflowerblue, green, red, yellow;

.a  {
  .b {
    each(@colors, {
      .@{value} .d {
        .e {
          color: @value;
        }
      }
    });
    .d .e { 
      font-size: 2em;
    }
    .d .f {
      font-size: 1.2em;
    }
  }
}

您可以单击代码段底部的“查看已编译的css”按钮，或查看



见《灵魂之光》中的笔（）
在…上

该用例非常接近各种“主题化”Qs，如：





等等

也就是说，有许多可能的解决方案，每种方案都有其优缺点，这取决于实际项目的其他细节和目标

---
按照“预期输出”的原样，编写一个处理重复代码的mixin是一个好的开始，例如：

#1

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    .-(@color) {
        .@{color} .d .e {color: @color}  
    }
    .-(red);
    .-(yellow);
    .-(green);
    // etc.
}

---
通过一些诡计和黑客手段，我们可以摆脱重复的
.d.e
，但我怀疑增加的复杂性和潜在问题是否值得：

#2

.a .b {
    .themed(~'.d .e', {
        font-size: 2em;
        color: black;
    }, {
        color: @color;
    });
}

// .....................
// generic "theme" impl.

.themed(@selector, @default, @colored) {
    .-(default);
    .-(red);
    .-(yellow);
    .-(green);

    .-(@color) {
         .@{color} @{selector}
             when (iscolor(@color)) {@colored();}
         @{selector}
             when not (iscolor(@color)) {@default();}
    }
}

---
为了说明实现“预期输出”示例的可能实现的变化几乎是无限的，并且主要取决于您熟悉的较少的功能以及您可以/想要/喜欢使用的功能，这里有一个使用更多“常规”/“主流”逻辑的更“现代的较少”示例（许多人更喜欢使用；要求小于3.x或更高）：

#3

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    each(red yellow green, {
        .@{value} .d .e {color: @value}
    });
}

（尽管在另一个答案中也提出了同样的建议）

---
<关于代码> >颜色> /COD>元素在选择器的中间，想想你的HTML是否真的需要这个。
也就是说，您是否真的需要诸如：

.a.b.yellow.d.e
，

.x.y.yellow.d.e
，

.p.q.yellow.d.e
，

.a.b.yellow.foo.e
，

有不同的颜色值吗

像
.yellow.e{color:yellow}
之类的集合就足够了吗？
这个用例非常接近各种“主题化”Q，比如：





等等

也就是说，有许多可能的解决方案，每种方案都有其优缺点，这取决于实际项目的其他细节和目标

---
按照“预期输出”的原样，编写一个处理重复代码的mixin是一个好的开始，例如：

#1

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    .-(@color) {
        .@{color} .d .e {color: @color}  
    }
    .-(red);
    .-(yellow);
    .-(green);
    // etc.
}

---
通过一些诡计和黑客手段，我们可以摆脱重复的
.d.e
，但我怀疑增加的复杂性和潜在问题是否值得：

#2

.a .b {
    .themed(~'.d .e', {
        font-size: 2em;
        color: black;
    }, {
        color: @color;
    });
}

// .....................
// generic "theme" impl.

.themed(@selector, @default, @colored) {
    .-(default);
    .-(red);
    .-(yellow);
    .-(green);

    .-(@color) {
         .@{color} @{selector}
             when (iscolor(@color)) {@colored();}
         @{selector}
             when not (iscolor(@color)) {@default();}
    }
}

---
为了说明实现“预期输出”示例的可能实现的变化几乎是无限的，并且主要取决于您熟悉的较少的功能以及您可以/想要/喜欢使用的功能，这里有一个使用更多“常规”/“主流”逻辑的更“现代的较少”示例（许多人更喜欢使用；要求小于3.x或更高）：

#3

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    each(red yellow green, {
        .@{value} .d .e {color: @value}
    });
}

（尽管在另一个答案中也提出了同样的建议）

---
<关于代码> >颜色> /COD>元素在选择器的中间，想想你的HTML是否真的需要这个。
也就是说，您是否真的需要诸如：

.a.b.yellow.d.e
，

.x.y.yellow.d.e
，

.p.q.yellow.d.e
，

.a.b.yellow.foo.e
，

有不同的颜色值吗

像
.yell这样的集合不会出现吗