Mi patrón para este tipo de cosas es una mezcla:
@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;
}
Esto tiene la ventaja adicional de ser extensible, por lo que si se encuentra que necesita varios selectores con propiedades realmente similares, puede agregar variables:
@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);
}