css - LESS 类本身声明

我正在做一个项目，我一直在看到这种在 LESS 中声明类的方式。该类在其内部再次声明，如下例所示：

.user-images {
  // some LESS here
  
  .user-images {
    // some more LESS here
  }
}

最初我认为这是一个复制粘贴错误，但这是经常使用的，所以它看起来是故意的。我还将代码移到了第二个声明之外，但这似乎破坏了一切。

我一直试图重构它并删除第二个声明（仅基于我认为代码应该易于阅读和理解的观点），但现在我开始变得非常好奇。

谷歌搜索似乎没有帮助（或者我可能使用错误的关键字进行搜索）。谁能解释这是如何工作的以及为什么有人会使用它？

需要注意的是，所有代码都是用 LESS 编写并编译为 CSS 的。

标签： css

您提供的代码：

.user-images {
  // some CSS here
  
  .user-images {
    // some more CSS here
  }
}

用 LESS 编写的，将被编译成这个 CSS 代码：

.user-images {
  // some CSS here
}

.user-images .user-images {
    // some more CSS here
}

通过这种方式，LESS 允许您编写比其 CSS 对应物更“分层”且更易于阅读的代码。

请参阅此处的示例。

因此，当您移出内部时，.user-images您已经破坏了一切，因为那将被编译为：

.user-images {
  // some CSS here
}

.user-images {
    // some more CSS here
}

它与原始代码具有不同的语义：