Css 单独使用父选择器（&；）作为选择器有什么用途？使用这样的选择器是一种不好的做法吗？

在阅读了一本又一本关于Less（LESSCS）的教程之后，我想知道这个

&

操作符应该如何使用。我知道它指的是父元素，比如：

div {
  &.fullheight {
    height: 100%;
  }
}

// turns into

div.fullheight {
  height: 100%;
}

但我经常看到：

div {
    span {
        & {
          padding: 1em;
          margin: 1em;
        }
    }
}

// turns into

div span {
  padding: 1em;
  margin: 1em;
}

与在类中仅使用

&

运算符类似，它几乎代表父元素，但这是一种错误的做法，因为当您键入以下内容时，可能会得到相同的结果：

div {
    span {
      padding: 1em;
      margin: 1em;
    }
}

这两种方法都有效，那么这是一种坏的/好的做法，还是每种方法都可能用于不同的情况

---

为了更清楚，下面是一个链接，我第一次看到你只能在一个类中编写

&

，而不需要其他任何东西

---

-ScottS的第一篇文章，他的文章中的第四个解决方案。

一般来说，写下面这样的东西会被认为是不好的做法，因为

&

只是多余的，没有任何附加值。它只输出整个父选择器

div span

div {
  span {
    & {
      padding: 1em;
      margin: 1em;
    }
  }
}

因此，您应该避免编写仅使用父选择器的选择器

---

您链接到的另一个示例是一个有趣的案例，我将其称为一个受过教育的黑客，以较少的时间绕过变量作用域和延迟加载概念

假设在没有父选择器的情况下编写了相同的代码（如下所示）

在这里，

@val

变量在同一块中声明了两次。由于变量的数量较少，因此在使用之前不需要声明它们（并且，如果在同一范围内声明同一变量两次或多次，则最后一次声明将获胜）

定义变量两次时，将使用变量的最后一次定义，从当前范围向上搜索。这类似于CSS本身，定义中的最后一个属性用于确定值

因此，对于

padding

和

margin

，编译后的CSS输出值都将为

0.1em

，而

padding

的期望值为

0.2em

，而

margin

的期望值为

0.1em

为了克服这个问题，该答案的作者引入了两个名称空间（没有名称），从而限制了范围问题。在每个嵌套块中定义的变量仅成为该块的局部变量，因此将被视为两个单独的变量

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
  &{
    @val: .2; /* this declaration applies only within this nest */
    padding: @setUnit;
  }
  &{
    @val: .1; /* this declaration applies only within this nest */
    margin: @setUnit;
  }
}

正如该答案的作者（在第一行中）所指出的，这是一种变通方法，因为无法用更少的内存创建真正的函数

但是从Less v2开始，我们可以在Less中定义我们自己的自定义函数，并按照中所述使用它们。编写这种自定义函数的能力应该可以消除编写这种黑客的需要

您也可以在同一线程中参考，以获得无需此类黑客攻击的解决方案

---

---

底线是将

&

单独用作选择器是一种不好的做法。链接答案中的解决方案是一种在早期版本的Less中非常有用的黑客攻击。它仍然很有用，但是有其他选项，因此只有在极少数情况下才应该单独使用

&

作为选择器，而其他选项都不起作用。

对于这种情况，

&

只是多余的，所以我认为这样写是不好的做法。如果您可以在看到这种嵌套块的地方发布实际代码（只有

&

作为选择器），那么我们可能会给出更多注释。-斯科特的第一篇文章，第四篇解决方案。在那里，我第一次看到你可以写作&只在课堂上写作，没有其他内容。我对标题做了一些编辑，因为通常提出的问题是，这种好/坏的做法看起来像是在征求意见，然后就结束了。如果你不同意我的编辑，请随意将其回滚。好的，这确实让我更清楚了，非常感谢你的长篇大论和高级答案。但是，自从我昨天开始使用less以来，您会推荐任何从零到完美的、漂亮的less代码编写指南/教程吗？提前感谢。：）@丹尼：事实上没有。我使用较少的唯一参考是，因为它是不断发展的，所以非官方教程中描述的内容可能曾经非常有用，但现在可能完全错误或过时。

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
  &{
    @val: .2; /* this declaration applies only within this nest */
    padding: @setUnit;
  }
  &{
    @val: .1; /* this declaration applies only within this nest */
    margin: @setUnit;
  }
}