Abstract Rules

Abstract rules are generic rules that can be extended with the @extend directive.


@abstract ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@abstract heading {
    font: bold 1rem serif;
    letter-spacing: .1em;
}

.foo {
    @extend ellipsis;
    display: block;
}
.bar {
    @extend ellipsis;
    @include heading;
}

Renders as


.foo,
.bar {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.foo {
    display: block;
}
.bar {
    font: bold 1rem serif;
    letter-spacing: .1em;
}