Making use of CSS vs Sass (SCSS) - base class issues and redundency

Question

I'm trying to clean up my CSS to be cleaner by using SCSS.

Standard CSS:

.dark-hr,
.light-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  background-color: #595959;
}
.light-hr {
  background-color: #cccccc;
}

vs SCSS:

.generic-hr { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend .generic-hr;
  background-color: #595959;
}
.light-hr {
  @extend .generic-hr;
  background-color: #cccccc;
}

Is there any way to avoid creating the 'generic-hr' class that won't be used? I was hoping that some kind of nest would work well. In this scenario the CSS is definitely way cleaner and more readable than SCSS.

Ideally I would need this to work in SCSS:

.## {
  // base class that is not outputted
  .dark-hr {
    //attributes the extend the base class '.##'
  }
  .light-hr {
    //attributes the extend the base class '.##'
  }
}

OUTPUT:

 .dark-hr, .light-hr {
   //shared attributes defined by '.##'
 }
 .dark-hr {
   // overrides
 }
 .light-hr {
   // overrides
 }

Answer 1

What you're wanting to use is an extend class (I call them "silent classes"), which is signified by using a % instead of a ..

hr%base { 
  width: 100%;
  height: 1px;
  margin: 15px 0px;
}
.dark-hr {
  @extend hr%base;
  background-color: #595959;
}
.light-hr {
  @extend hr%base;
  background-color: #cccccc;
}