样式内的CSS样式-有人可以向我解释一下

Question

我发现了一种CSS样式，用于设置popper.js框的箭头位置。 .popper__arrow在另一种样式内。有人可以向我解释这是如何工作的。这是我第一次看到此用法。

CSS是

.popper[x-placement^="bottom"] {
  margin-top: 5px;
  .popper__arrow {
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent $popper-bg transparent;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
}

Answer 1

AFAIK，这不是有效的CSS语法，它可能旨在与某些预处理器配合使用，该预处理器将使用此源，然后使用它来生成实际的CSS。

例如，请参见Less.js "nesting" documentation。