0

我想创建如下类：

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

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

4

1 回答 1

3

原因：

这是因为在 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;
    }
}
于 2016-05-15T11:42:57.047 回答