how to group elements with same class without redundancy SCSS

Solution 1:

Maybe you can write it cleaner with :is() CSS pseudo-class it can do it with one cleaner selector.

For example, here's how you could target all headings inside a some container element

[class*='col'] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)
{
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.

If you're want SASS solution you could use this mixin

@mixin headings {
  [class*='col'] h1,
  [class*='col'] h2,
  [class*='col'] h3,
  [class*='col'] h4,
  [class*='col'] h5,
  [class*='col'] h6,
  [class*='col'] .h1,
  [class*='col'] .h2,
  [class*='col'] .h3,
  [class*='col'] .h4,
  [class*='col'] .h5,
  [class*='col'] .h6 {
        @content;
    }
}

Use it like so:

@include headings {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}