Unknown selector in CSS/SCSS-CodePudding

I've come across a CSS selector that I've never seen before, and can't seem to find any reference to on google.

The selector is: #{if(&, '&', '*')}.e-control-wrapper

Am I right in thinking that it's basically saying that it doesn't care about what the ID is, just that it has one and that corresponding class?

Here's a broader example for reference.

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

Updating to add further context based on what I've provided in the comments:

The SCSS block in question came from the SCSS file generated by this tool: https://blazor.syncfusion.com/themestudio/?theme=material

Since the generated SCSS is a bit clunky and repetitive, I've been going through breaking it down into manageable chunks and seeing whether I can cut some of the repetition down (for each Blazor element it seems to do a pass setting the structure, then override what it just set with thematic stuff - using a lot of the same selectors). As I hadn't seen anything of the sort before, I figured I'd see if anyone recognised that selector before tinkering too much and finding out the hard way.

CodePudding user response：

Given that curly braces { } represent a very specific syntax in CSS (ie. they contain property-value pairs), it's difficult to imagine how

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

might represent a valid CSS selector.

A simple experiment shows that this selector selects nothing:

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>