Использование CSS VS SASS (SCSS) - проблемы базовых классов и резервирования

Question

Я пытаюсь убрать свои CSS, чтобы быть очистителем с помощью SCSS.

Стандартные 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;
}

Есть ли способ избежать создания класса «Generic-HR», который не будет использоваться? Я надеялся, что какое-то гнездо будет хорошо работать. В этом сценарии CSS определенно является очистителем и более читаемой, чем SCSS.

В идеале мне нужно будет работать в SCSS:

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

ВЫХОД:

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

Answer 1

Что вы хотите использовать, это продлить класс (Я называю их «тихими классами»), который означает использование % вместо а ..

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;
}

Answer 2

Разве вы обычно не сделаете что-то подобное:

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

Answer 3

Мой рисунок для такого рода вещь - это микс:

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

Это имеет дополнительное преимущество расширяемой, поэтому, если вы обнаружите, что нуждаетесь в нескольких селекторов с действительно похожими свойствами, вы можете добавить в переменные:

@mixin generic-hr($background-color: transparent) { 
  width: 100%;
  height: 1px;
  margin: 15px 0px; 
  background-color: $background-color;
}
.dark-hr {
  @include generic-hr(#595959);
}
.light-hr {
  @include generic-hr(#cccccc);
}
.medium-hr {
  @include generic-hr(#818181);
}