Using SCSS 'current selector' feature to match all class names starting with same text

Question

Suppose, we have HTML with similar name classes.

<div class="header-name">NAME</div>
<div class="header-description">DESCRIPTION</div>

I want to use SCSS's current selector feature to style them differently:

.header {
   &-* {} // doesn't work

   &-name {} // works fine

   &-description {} // works fine
}

How to match all header-*-like classes using SCSS? I don't want to solve this like that:

.header {
   &-name, &-description {} // I don't want that solution, because in real case I have like 20 such selectors

   &-name {}

   &-description {}
}

I know I can use strict CSS here:

div[class^='header-'] {}

But I wonder if it is possible inside one block without repeating

Answer 1

I don't think that it's possible in SCSS. The most closest solution that I have come up with is using a loop combined with the variable:

$values: (
 'value1',
 'value2'
);

@each $value in $values {
  .header-#{$value} {
    // Your code here
  }
}

EDIT

Better yet: Convert it into a mixin:

@mixin all($base, $names...) {
  @each $name in $names {
    .#{$base}-#{$name} {
      @content;
    }
  }
}

And call it with:

$values: (
 'value1',
 'value2'
);
$base: 'header';

@include all($base, $values) {
  // Your code here
}