이런 종류의 패턴은 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;
}
이것은 확장 가능에 대한 이점이 추가되므로 정말로 유사한 속성을 갖춘 여러 선택자가 필요한 경우 변수를 추가 할 수 있습니다.
@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);
}