Less 在一个父类中嵌套多个相同类型的类

我想创建如下类：

.colored{
     &{
          .red{background-color:red;}
          .blue{background-color:blue;}
          .gray{background-color:gray;}
      }
}

它不起作用，但如果我这样写：

.colored{
          &.red{
              background-color:red;
          }
          &.blue{
              background-color:blue;
          }
          &.gray{
              background-color:gray;
          }
}

---

然后它就起作用了。是否有任何原因导致第一个版本无法按预期工作？

原因：

这是因为嵌套在更少的时间内工作（并且应该工作）的方式。将选择器嵌套在另一个选择器下时，内部选择器被视为适用于作为外部选择器表示的元素的子元素的元素

下面是代码

.colored{
    &{
        .red{background-color:red;}
        .blue{background-color:blue;}
        .gray{background-color:gray;}
    }
}

等同于以下内容（因为

&

将由父选择器替换，该选择器为

.colored

）

正如我前面提到的，这将编译为

.colored

，

colored.blue

，

colored.gray

（注意选择器之间的空格）

另一方面，当您在紧靠

.red

、.blue、.gray之前插入

&

时，表示父选择器和嵌套选择器应用于同一元素（而不是子元素）。它将输出的选择器是

.colored

，

colored.blue

，

colored.gray

（请注意，没有空格）

---

解决方案：

这与您的问题中的代码相同，是建议的解决方案。我在回复中再次发布它只是为了让它完整

.colored{
    &.red{
        background-color:red;
    }
    &.blue{
        background-color:blue;
    }
    &.gray{
        background-color:gray;
    }
}

---

原因：

这是因为嵌套在更少的时间内工作（并且应该工作）的方式。将选择器嵌套在另一个选择器下时，内部选择器被视为适用于作为外部选择器表示的元素的子元素的元素

下面是代码

.colored{
    &{
        .red{background-color:red;}
        .blue{background-color:blue;}
        .gray{background-color:gray;}
    }
}

等同于以下内容（因为

&

将由父选择器替换，该选择器为

.colored

）

正如我前面提到的，这将编译为

.colored

，

colored.blue

，

colored.gray

（注意选择器之间的空格）

另一方面，当您在紧靠

.red

、.blue、.gray之前插入

&

时，表示父选择器和嵌套选择器应用于同一元素（而不是子元素）。它将输出的选择器是

.colored

，

colored.blue

，

colored.gray

（请注意，没有空格）

---

解决方案：

这与您的问题中的代码相同，是建议的解决方案。我在回复中再次发布它只是为了让它完整

.colored{
    &.red{
        background-color:red;
    }
    &.blue{
        background-color:blue;
    }
    &.gray{
        background-color:gray;
    }
}

---

如果我像你说的那样写，我必须在父元素中使用有色类，像这样，我的答案中提供的代码块是为了显示错误，正确的解决方案是问题本身的第二个片段。我避免再次发布它，只是解释了为什么另一个不起作用。它没有帮助。我期待不同的解决方法it@maviofis：然后您能澄清您期望的输出（编译的CSS）吗？我想你已经在你的问题中提到了第二种方法是有效的（这与推荐的解决方案相同）。输出必须是这样的：.colored、.colored.blue、.colored.grayi如果我按照你说的那样写，我必须在父元素中使用colored类，就像这样。我的答案中提供的代码块是为了显示错误所在，正确的答案是问题本身的第二个片段。我避免再次发布它，只是解释了为什么另一个不起作用。它没有帮助。我期待不同的解决方法it@maviofis：然后您能澄清您期望的输出（编译的CSS）吗？我认为您在问题中已经提到第二种方法有效（与推荐的解决方案相同）。输出必须如下：.colored.red、.colored.blue、.colored.gray