使用 &> 作为基本选择器来区分 LESS 和 SASS/SCSS答案

【问题标题】：Difference LESS and SASS/SCSS using &> as a base selector使用 &> 作为基本选择器来区分 LESS 和 SASS/SCSS
【发布时间】：2014-05-06 19:23:46
【问题描述】：

我实际上正在开发一个 LESS 到 SCSS 的转换器。实际上，我从来没有真正深入使用过 LESS，而是 SCSS。触发完成了基本的差异和测试，我来了一些正则表达式替换。无论如何，有一个我无法触发的语法结构。在 LESS 中你可以这样写：

.no-border &>table, 
.no-border .table-wrapper table {
   border:none !important;
}

反正只是编译成：

.no-border > table,
.no-border .table-wrapper table {
  border: none !important;
}

（所以基本上只剥离 &-parent 运算符？）

无论如何，SASS/SCSS 不允许这种结构。老实说，选择器的字面意思是“相同的父母，但直接的孩子”是没有意义的，还是我在这里错过了什么？

也许有人曾经在 LESS 中使用过这个，可以解释这个构造的用途是什么？

在我的转换器中，我只是将“&>”替换为（纯）“>”。这样好吗？

【问题讨论】：

标签： css sass less

【解决方案1】：

这里的上下文就是一切

我不能说替换它是“好的”，因为它取决于它所在的上下文。作为一个非孩子，你是对的，它编译成你所指出的并且你的“解决方案”很好。但是，如果该代码在 LESS 中并在具有父选择器的上下文中使用（或导入），例如以下示例：

.parent {
   .no-border &>table, 
   .no-border .table-wrapper table {
     border:none !important;
   } 
}

然后有一个主要区别（并且需要）保留它，因为它产生了这个：

.no-border .parent > table,
.parent .no-border .table-wrapper table {
  border: none !important;
}

我假设有人按照他们的方式对其进行编码，以允许 .no-border 成为 .parent 的父级或 .parent 的子级的功能，可能是出于某些特定目的（其他人会认为只需 .no-border table 就可以了）。

无论如何，如果您正在处理“转换器”，那么我认为您会希望以某种方式处理此转换以在 SCSS 中获得与 LESS 相同的输出结果（否则您最终会得到一个“错误”转换器） .

【讨论】：