Question

在阅读有关Less（LessCSS）的教程之后的教程之后，我只是想知道如何使用这个&运算符。我知道它引用了父元素，如：

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

两者都有效，是不是很好/很好的做法，或者每种情况都可以在不同情况下使用？

为了更加清晰，下面是答案的链接，我第一次看到你只能在没有其他任何内容的课堂上写&。

LESSCSS - use calculation and return value - ScottS的第一篇文章，他的帖子中的第四个解决方案。

Answer 1

一般来说，写下面的内容会被认为是不好的做法，因为&只是多余的，根本没有增值。它只输出整个父选择器div span。

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

因此， 应避免编写仅使用 &（父选择器）的选择器。

您链接的另一个示例是一个有趣的案例，我将其称为 受过教育的黑客 来绕过Less中的变量作用域和延迟加载概念。

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

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

.someAwesomeClass { 
  @val: .2; 
  padding: @setUnit;
  @val: .1; 
  margin: @setUnit;
}

这里@val变量在同一个块中声明两次。由于Less会lazy loading变量，因此在使用之前不需要声明它们（和）如果在同一范围内声明相同的变量两次或更多次，则最后一个声明将获胜。

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

因此，对于0.1em和padding，编译的CSS输出的值为margin，而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创建一个真正的函数。

但从Less v2开始，我们可以在Less中定义我们自己的自定义函数，并按照this answer by Bass Jobsen中的描述使用它们。编写此类自定义函数的能力应该消除编写此类hack的需要。

您也可以在同一个线程中引用the comment by seven-phases-max来获得解决方案，而无需进行此类黑客攻击。

底线是单独使用&作为选择器是一种不好的做法。链接答案中的解决方案是一个黑客，它在早期版本的Less中很有用。它仍然有用，但有其他选项，所以&仅作为选择器应该只在非常罕见的情况下使用，其他选项都不起作用。

父选择器（＆amp;）单独作为选择器有什么用？使用这样的选择器是不好的做法吗？

1 个答案: