How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

Ampersand (&) in SASS: Using it at the End and Within Selectors

Developers often encounter challenges when using the ampersand (&) character in SASS selectors, especially when it appears at the end or within the selector. This inquiry delves into this specific issue.

The presented mixin attempts to port some LESS code to SASS. However, due to an incorrect usage of & in the selector, the code fails to produce the desired output.

To understand the purpose of the & character, it's crucial to recognize its role as a placeholder for the parent selector. When used within a mixin or block, & represents the selector or class that invoked the mixin.

In this case, the intended behavior is for the mixin to generate selectors that include the class name of the invoking element. For instance, if the mixin is invoked inside a

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

@mixin button-variant($color, $background, $border) {
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink &.illNeverWork {

            color: #123ABC;
            ...
        }
  }