How to set multiple properties for multiple elements but within the same id?

Question

css

How to simplify access to elements?

<div>
  <div class="main1">
    <div class="sub1">
    Block 1
    </div>
      <div class="sub2">
    Block 2
    </div>
      <div class="sub3">
    Block 3
    </div>
  </div>
<br>
  <div class="main2">
    <div class="sub1">
    Block 5
    </div>
 ....
  </div>
</div>

.main1 .sub1 {color:red}
.main1 .sub2 {color:red}
.main1 .sub3 {color:red}
/* или */
.main1 .sub1, .main1 .sub2, .main1 .sub3 {color:red}

My main classes (main) are different, but the subclasses are the same . The
task is to access the subclasses, but it turns out to be inconvenient to list each time which class the subclass belongs to.
Is it possible to simplify (group) the appeal? Type:

.main1 {
  .sub1 {color:red}
  .sub2 {color:red}
  .sub2 {color:red}
}

Answer 1

In SCSS this is easily solved via @extends:

%subsclasses-color {
  .sub1, .sub2, .sub3 {
    color:red;
  }
}
.main1 {
  @extends %subclasses-color;
}
.another-main {
  @extends %subclasses-color;
}

Answer 2

<div class="main1">
    <div class="sub"></div>
    <div class="sub"></div>
    <div class="sub"></div>
  </div>

  <div class="main2">
    <div class="sub"> </div>
    <div class="sub"> </div>
    <div class="sub"> </div>
  </div>

You write "My main classes (main) are different, and the subclasses are the same"
Accordingly, why should sub be numbered if there is the same style?

.main1 {
  .sub { color: red }
}

.main2 {
  .sub { color: blue }
}