Starting from Sass version 3.4, this feature is now available. The code structure will appear as shown below:

.notification-alert {
    background-color: orange;

    @at-root p#{&} {
        background-color: lightblue;
    }
}

It is important to highlight the @at-root command and the use of interpolation with the ampersand symbol. Failing to include the @at-root directive may lead to a selector such as

.notification-alert p.notification-alert

One method is to store the current selector in a variable for flexible use:

.Parent {
  $p: &;

  &-Child {
    #{$p}:focus & {
      border: 1px solid red;
    }

    #{$p}--disabled & {
      background-color: grey;
    }
  }
}

Natalie Weizenbaum (the lead designer and developer of Sass) firmly believes that support for the "&" symbol will never be implemented:

Explaining her rationale, she states: "Currently, & is syntactically the same as an element selector, so it cannot coexist with one. This serves to provide clarity on its usage; for instance, foo&bar would not constitute a valid selector (it might instead be interpreted as foo& bar or foo &bar). I do not believe this scenario justifies changing the current functionality."

Source: #282 – Element.parent selector

To the best of my knowledge, there are no known workarounds to address this limitation.

The optimal solution may involve implementing the following steps (assuming that there are additional attributes in your .message-error class beyond just the background color).

.message-error {
  background-color: red;
}

p.message-error {
  @extend .message-error;
  background-color: yellow
}

While this method may not provide a seamless grouping, you can still maintain their proximity to each other.

I encountered a similar issue, so I developed a mixin to address it.

@mixin tag($tag) {
  $ampersand: & + '';
  $selectors: simple-selectors(str-replace($ampersand, ' ', ''));

  $main-selector: nth($selectors, -1);
  $previous-selectors: str-replace($ampersand, $main-selector, '');

  @at-root {
     #{$previous-selectors}#{$tag}#{$main-selector} {
      @content;
    }
  }
}

To make this mixin function properly, you will also require a string replacement function (you can find one here by Hugo Giraudel):

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

Explanation of the process:

SCSS

.foo {
  color: blue;

  @include tag(p) {
    color: red;
  }
}

Output

.foo {
  color: blue;
}

p.foo {
  color: red;
}

Use case
This method is effective with nested selectors but not with compound ones.

@JohnSmith Unfortunately, achieving your desired outcome using SASS is not feasible.

Please refer to the following comment by User123: https://example.com/sass-issues/123#comment-9876543

The crucial element here is the space preceding the '&':

.header-section {
    font-size: 16px;

    h1 & {
        color: blue;
     }
  }

You should use:

.header-section {
    font-size: 16px;

    h1& {
        color: blue;
     }
  }

If you are looking to maintain the grouping of selectors by parent, consider adding a shared parent element like this:

section {
    & .error-message {color: red;}
    & p.error-message {color: blue}
}

Instead of using section, you can choose another common parent such as #Wrapper or any other container that will encompass all error messages.

LATEST UPDATE (Alternative Approach)

You could try using @for loop and lists to achieve the desired result. Here's a possible solution (uncertain if the period is accepted within the list).

@for $i from 1 to 3 {
  nth(. p. ul., #{$i})error-message {
    color: nth(red blue green, #{$i}));
  }
}

This code snippet should generate something similar to:

.error-message {
   color: red;}
p.error-message {
   color: blue;}
ul.error-message {
   color: green;}

An innovative solution to this issue is a mixin that I created.

Check it out on Github: https://github.com/imkremen/sass-parent-append

See an example in action here: https://codepen.io/imkremen/pen/RMVBvq

To use the mixin with SCSS:

.ancestor {
  display: inline-flex;

  .grandparent {
    padding: 32px;
    background-color: lightgreen;

    .parent {
      padding: 32px;
      background-color: blue;

      .elem {
        padding: 16px;
        background-color: white;

        @include parent-append(":focus", 3) {
          box-shadow: inset 0 0 0 8px aqua;
        }

        @include parent-append(":hover") {
          background-color: fuchsia;
        }

        @include parent-append("p", 0, true) {
          background-color: green;
        }
      }
    }
  }
}

The result will be as shown below (with the corresponding CSS):

.ancestor {
  display: inline-flex;
}
.ancestor .grandparent {
  padding: 32px;
  background-color: lightgreen;
}
.ancestor .grandparent .parent {
  padding: 32px;
  background-color: blue;
}
.ancestor .grandparent .parent .elem {
  padding: 16px;
  background-color: white;
}
.ancestor:focus .grandparent .parent .elem {
  box-shadow: inset 0 0 0 8px aqua;
}
.ancestor .grandparent .parent:hover .elem {
  background-color: fuchsia;
}
.ancestor .grandparent .parent p.elem {
  background-color: green;
}

I just developed a package/mixin that offers a similar solution :) (It could be beneficial for you!)

https://github.com/Darex1991/BEM-parent-selector

Instead of writing it like this:

.calendar-container--theme-second-2 {
  .calendar-reservation {
    @include BEM-parent-selector('&__checkout-wrapper:not(&--modifier):before') {
      content: 'abc';
    }
  }
}

This mixin is designed to include the selector only for the ultimate parent element:

.calendar-container--theme-second-2 .calendar-reservation__checkout-wrapper:not(.calendar-reservation--modifier):before {
   content: 'abc';
 }

For additional details, please refer to the repository.

Encountering this issue is not uncommon. In Bootstrap 3, a parent selector hack can be used to address it. I have made some modifications to the code for my specific needs...

@mixin custom-error() {
  $class: '.custom-error';
  #{$class} {
    background-color: red;
  }
  p#{$class} {
    background-color: yellow;
  }
}
@include custom-error();

Similar to wheresrhys's approach above, but with sass errors fixed. The provided code allows you to manage everything as one block and collapse it in your editor. By nesting the variable, it becomes local, making it easier to reuse $class for applying the hack whenever needed. Refer to the link below for a functional example...

Whenever I need to make adjustments to an element in the middle of a large SASS tree, I rely on an @mixin function like this.

The first parameter is the parent element, or target, and the second parameter is the additional class that should be applied.

SASS

@mixin parentClass($parentTarget, $additionalClass) {

    @at-root #{selector-replace(&, $parentTarget, $parentTarget + $additionalClass)} {
        @content;
    }
}

For example,

I may want to adjust the font size within a strong tag when the .txt-target class also has the class .txt-strong.

HTML

<section class="sample">
    <h1 class="txt-target txt-bold">Sample<strong>Bold</strong>Text</h1>
</section>

SASS

section{
    .txt-target{
        strong{
            @include parentClass('.txt-target','.txt-bold'){
                font-weight:bold;
                font-size:30px;
            }
        }
    }
}

More information about using @at-root can be found here.

You can also check out a similar function called @mixin unify-parent($child) for reference.