Question

我想创建如下的类：

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

然后它的工作原理。是否有任何原因导致第一个版本无法正常工作？

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

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

1 个答案: