样式中的 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

据我所知，这不是有效的 CSS 语法，它可能旨在与一些预处理器一起使用，这些预处理器将获取此源，然后使用它来生成实际的 CSS。

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