在一个父级中嵌套多个相同类型的类答案

【问题标题】：Nesting multiple same type class inside one parent在一个父级中嵌套多个相同类型的类
【发布时间】：2016-05-15 20:39:11
【问题描述】：

我想创建如下类：

.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;
          }
}

然后就可以了。第一个版本不能按预期工作有什么原因吗？

【问题讨论】：

标签： less lesscss-resources

【解决方案1】：

原因：

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

下面是代码

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

等价于以下（因为&将被父选择器替换为.colored）

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

正如我之前提到的，这将编译为.colored .red、.colored .blue、.colored .gray（注意选择器之间的空格）。

另一方面，当您在 .red、.blue、.gray 之前插入 & 时，这意味着父选择器和嵌套选择器适用于同一个元素（而不是子）。它将输出的选择器是.colored.red、.colored.blue、.colored.gray（注意没有空格）。

解决方案：

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

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

【讨论】：

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