My pattern for this kind of thing is a mixin:
@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;
}
This has the added advantage of being extensible, so if you find yourself needing several selectors with really similar properties you can add in 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);
}