CSS/SCSS 中的未知选择器

Question

我遇到了一个我以前从未见过的 CSS 选择器，并且似乎无法在 google.

上找到任何参考

选择器是：#{if(&, '&', '*')}.e-control-wrapper

我是否认为它基本上是在说它不关心 ID 是什么，只关心它有一个和对应的 class？

这里有一个更广泛的例子供参考。

.e-bigger .e-input-group-icon.e-date-icon,
#{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
#{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
    font-size: $datepicker-bigger-icon-font-size;
    margin: $datepicker-icon-bigger-margin;
    min-height: $datepicker-bigger-icon-container-min-height;
    min-width: $datepicker-bigger-icon-container-min-width;

    #{if(&, '&', '*')}::before {
        content: '\e901';
        font-family: 'e-icons';
    }

    #{if(&, '&', '*')}:focus {
        background: $hover-bg-color;
        border-radius: $datepicker-icon-border-radius;
    }
}

更新以根据我在评论中提供的内容添加更多上下文：

有问题的 SCSS 块来自此工具生成的 SCSS 文件：https://blazor.syncfusion.com/themestudio/?theme=material

由于生成的 SCSS 有点笨重且重复，我一直在将其分解为可管理的块，看看是否可以减少一些重复（对于它的每个 Blazor 元素）似乎通过设置结构，然后用主题内容覆盖刚刚设置的内容——使用很多相同的选择器）。由于我之前从未见过任何此类内容，所以我想我会先看看是否有人认出了那个选择器，然后再进行过多的修改并找到困难的方法。

Answer 1

鉴于大括号 { } 表示 CSS 中非常具体的语法（即它们包含 属性-value 对），很难想象

#{if(&, '&', '*')}

可能代表一个有效的 CSS 选择器。

一个简单的实验表明这个选择器没有选择任何东西：

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 12px;
  background-color: rgb(127, 127, 127);
}

#{if(&, '&', '*')} {
  background-color: rgb(255, 0, 0);
}

<div></div>
<div id="#{if(&, '&', '*')}"></div>

CSS/SCSS 中的未知选择器

Unknown selector in CSS/SCSS

css

sass

css-selectors